В CSS, как не перемещать Div шириной 300 пикселей на следующую строку?

Скажем, есть полоса, стилизованная внизу области просмотра с помощью

position: fixed; bottom: 0; left: 0; width: 100%; height 50px; overflow: hidden

а внутри него 4 Дива, каждый плавает влево. Каждый Div имеет ширину около 300 пикселей или может быть больше (в зависимости от содержимого).

Теперь, когда окно имеет ширину 1200 пикселей и мы видим все 4 элемента Div, но когда размер окна изменяется до ширины 1180 пикселей (всего на 20 пикселей меньше), весь элемент Div шириной 300 пикселей исчезает, потому что он «плавает». на следующую строку.

Так как же сделать так, чтобы Div оставался там и отображал 280 пикселей, а не полностью исчезал?

Кстати, white-space: nowrap не будет работать, так как это, вероятно, связано с отсутствием переноса встроенного содержимого.

Я думал поместить другой Div внутри этого Div, с фиксированной шириной 1200px или 2000px, так что все Div будут плавать на одном уровне в этом внутреннем Div, а внешний Div обрежет его с помощью overflow: hidden. Но это больше похоже на хак... так как ширина всех этих Div может быть динамической, а установка фиксированной ширины 1200px или 2000px кажется слишком большим хаком.

Обновление: на самом деле, это относительно простое решение, не связанное с IE 6 или 7... особенно если мы знаем, что полоса не будет шире 2000 пикселей.


html css width css-float
person nonopolarity    schedule 10.06.2010    source источник
comment
уверены ли вы? clear должен остановить нормальный поток вокруг плавающих элементов и должен идти ниже него.   -  person nonopolarity    schedule 10.06.2010

Ответы (1)


arrow_upward
1
arrow_downward

Установите 4 внутренних блока на display: inline-block; Затем вы можете использовать white-space: nowrap;.

Затем float можно удалить.

Примечание. Если вы должны поддерживать IE7 и более ранние версии, добавьте следующий условный CSS:

<!--[if lte IE 7]>
<style  type="text/css">
    .BottomWrapper div
    {
        display:            inline;
        position:           relative;
        bottom:             0;
    }
</style>
<![endif]-->
person Brock Adams    schedule 10.06.2010
comment
Обратите внимание, что, как и многие свойства CSS, старый IE не предлагает хорошей поддержки inline-block и не будет работать с <div> в IE ниже 8. Дополнительная информация: quirksmode.org/css/display.html#inlineblock - person mipadi; 10.06.2010
comment
@mipadi: он работает в IE8 и во всех других современных браузерах — согласно browsershots.org. IE7 и ниже всегда требуют условно включенного обходного CSS, в любом случае (который, по общему признанию, подлежит уточнению). - person Brock Adams; 10.06.2010
comment
На самом деле, он отлично работает, с дополнительным CSS для компенсации ошибок IE, см. Исправленный ответ. - person Brock Adams; 10.06.2010