Последний элемент не должен переноситься первым

0

В этом макете два элемента плавают влево и один плавает вправо: http://jsfiddle.net/RgkRq/9/

.content {
    background-color: red;
    float:left;
    width: 300px;
}
.menu {
    float:right;
    width: 150px;
    background-color: green;
}

<DIV class="container">
    <div class="content">CONTENT</DIV>
    <div class="content">CONTENT</DIV>
    <div class="menu">MENU</DIV>
</DIV>

Когда страница сжимается, последний элемент будет обертываться под двумя другими, но я хочу, чтобы он остался там и заставил остальных обернуть первым.

Я знаю, я могу добиться этого, изменив свой порядок в html, например: http://jsfiddle.net/3vVwp/1/

Мой вопрос: есть ли способ получить это поведение в css без изменения html?

Спасибо, Ханнес

  • 1
    Два примера ведут себя одинаково.
  • 0
    Вы не думаете, что это должно стать отзывчивым?
Показать ещё 6 комментариев
Теги:

1 ответ

0

Не лучшее решение, но это может быть альтернатива тому, о чем вы просите.

http://jsfiddle.net/RgkRq/11/

Меню имеет фиксированную ширину, а содержимое divs сокращается (гибкая ширина). Когда ширина столбцов достигает минимального значения, то ширина меню уменьшается.

То, что я сделал, задает контейнер div как display: table, а дочерние divs как display: table-cell:

.container {
    display:table;
    width:100%;
}
.content {
    background-color: red;
    display:table-cell;
    border-right:10px solid #fff;
}
.menu {
    width: 150px;
    background-color: green;
    display:table-cell;
}

Граница-право используется для разделения содержимого на столбцы.

Вы захотите проверить это для поддержки браузера, поскольку старые браузеры не поддерживают display: table.

Поделиться
  • 0
    В этом решении нет больше упаковки. Я хочу, чтобы он был перенесен, но мне нужно изменить его, чтобы первые элементы переносились первыми.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню