Очистить элементы, которые находятся в середине 3 колонки макета - PullRequest
Новая
       5

Очистить элементы, которые находятся в середине 3 колонки макета

0 голосов
/ 20 марта 2012

a имеет три столбца, и я хочу, чтобы в среднем столбце было три элемента, но каждый раз, когда мой контент на боковых панелях «длиннее», чем контент в среднем блоке, ящики просто переходят вниз под «самый длинный элемент». Вот мой код: 

<div style="float: left; width: 15%; background-color: yellow;">
<p>left</p>
<p>left</p>
<p>left</p>
</div>
<div style="float: right; width: 15%; background-color: pink;">
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
</div>
<div style="margin-left: 20%; margin-right: 20%;">
<div style="float: left; width: 20%; background-color: blue; margin: 1%">
    middle
</div>
    <div style="float: left; width: 20%; background-color: blue; margin: 1%">
    middle
</div>
    <div style="float: left; width: 20%; background-color: blue; margin: 1%">
    middle
</div>
<div style="clear: both;"></div>
<div style="float: left; width: 20%; background-color: blue; margin: 1%">
    middle
</div>
    <div style="float: left; width: 20%; background-color: blue; margin: 1%">
    middle
</div>
<div style="float: left; width: 20%; background-color: blue; margin: 1%">
    middle
</div>
<div style="clear: both;"></div>
<div style="float: left; width: 20%; background-color: blue; margin: 1%">
    middle
</div>
    <div style="float: left; width: 20%; background-color: blue; margin: 1%">
    middle
</div>
<div style="float: left; width: 20%; background-color: blue; margin: 1%">
    middle
</div>

1004 *

Вот код для jsfiddle для лучшего понимания. Я был бы рад, если бы кто-нибудь мог объяснить мне «очистку».

Edit: Я следовал этому уроку http://css.maxdesign.com.au/floatutorial/tutorial0406.htm

Ответы [ 2 ]

1 голос
/ 20 марта 2012

Ваш средний div представлен как элемент уровня блока, и поэтому его подталкивают вместе с содержимым ваших div-ов боковой панели. Поплавайте влево и добавьте правильную ширину, чтобы решить проблему. Средняя ширина div = 20% + 20% поля + 15% + 15% ширины боковой панели = 70% + 30% среднего div = 100%.

http://jsfiddle.net/DyHGP/5/

0 голосов
/ 20 марта 2012

Это из-за следующего, что у вас есть после каждых трех делений. 

<div style="clear: both;"></div>

Очистка используется, чтобы бросить элемент прямо под чем-либо, что является плавающим.Использование ясно: оба;означает, что он очистит все, что всплывает влево или вправо.

Быстрое решение состоит в том, чтобы удалить эти элементы и увеличить ширину каждого из div в центральном столбце до 30%, что затем заставит 4-йодин на следующую строку.

...