В CSS, как не перемещать Div шириной 300px на следующую строку? - PullRequest
Новая
       5

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

2 голосов
/ 10 июня 2010

Скажем, в нижней части видового экрана есть панель, стилизованная с использованием 

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

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

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

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

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

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

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

1 Ответ

1 голос
/ 10 июня 2010

Установите 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]-->
...