Как распределить div по всей ширине контейнера? - PullRequest
Новая
       15

Как распределить div по всей ширине контейнера?

2 голосов
/ 20 июля 2009

Я бы хотел, чтобы 'b' было равномерно распределено по 'a', вот так: 

[1        2         3        4]

Было бы неплохо, если бы не хватило места, то блок 'a' продолжается до следующей строки. Вот структура HTML, которую я хотел бы, но она не зафиксирована в камне и может быть изменена. 

<html>
    <head>
        <style>
            .a { width: 100%; border: 1px solid; float: left; }
            .b {  width: 100px; border: 1px solid red; float: left;}
        </style>
    </head>
    <body>
        <div class'a'>
            <div class='b'>1</div>
            <div class='b'>2</div>
            <div class='b'>3</div>
            <div class='b'>4</div>
        </div>
    </body>
</html>

Ответы [ 4 ]

0 голосов
/ 20 июля 2009

Правильно думать, что вы хотите достичь этого: 

[[1   ][ 2  ][  3 ][   4]]

чтобы по существу дать это (со скрытыми границами 'b'): 

[1    2    3    4]

а где у вас произвольное количество внутренних элементов фиксированной ширины, а внешний контейнер произвольной ширины?

Я не совсем уверен, что есть способ достичь этого, не углубляясь в javascript: (

0 голосов
/ 20 июля 2009

Что вы говорите, это проблема? Эффект обтекания не работает должным образом, когда ширина .a меньше 400 пикселей? Я предполагаю, что высота .a не соответствует нижней части 4-го .b div в этом случае. вам может понадобиться добавить <br clear="all" /> после .b s внутри .a.

0 голосов
/ 20 июля 2009

Возможно, лучше всего было бы сделать .b встроенным блоком и сделать его ширину 100%.

0 голосов
/ 20 июля 2009

Я думаю, что вы ищете умные столбцы, подобные описанным в этом примере , с использованием jQuery. Вы также можете попробовать live демо .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...