Div Float Проблема: кажется, что div автоматически очищается: left - PullRequest
Новая
       24

Div Float Проблема: кажется, что div автоматически очищается: left

0 голосов
/ 07 октября 2011

У меня есть серия изображений, все из которых имеют width:400px, но имеют различную высоту.Они находятся в следующем контейнере:

#content {width:808px;margin:0 auto;margin-top:100px}

Все изображения ODD имеют следующий код:

{float:left;clear:left;margin:2px}

Все изображения EVENиметь следующий код:

{float:right;clear:right;margin:2px}

Теоретически не должно быть, чтобы каждое изображение ODD располагалось слева друг от друга, а каждое изображение EVEN должно располагаться справа сверху.друг друга.

Вместо этого я получаю это:

Chaos

Это как если бы некоторые изображения справа были clear:left или clear:both, верно?

Есть мысли?

Спасибо

1 Ответ

1 голос
/ 07 октября 2011

возьмите, к примеру, этот код: 

<div>Airplane</div>
<div style="float: left;">Symba</div><div style="float:right;">Chewbacca(?)</div>

Вы не ожидаете, что вершина Чубакки (?) Совпадет с вершиной Самолета! это будет соответствовать вершине Symba.

У Symba есть поплавок: слева, поэтому он находится под самолетом. неважно, летает самолет или нет.

Я видел макеты, которые делают то, что вы хотите, применяя float: left ко ВСЕМ элементам, а затем используя некоторый Javascript, чтобы убрать пустое пространство после загрузки страницы (float: left самостоятельно) т, как вы уже могли заметить). Мне не нравится это решение, но единственная альтернатива, о которой я могу подумать, - это предварительно отсортировать изображения по двум столбцам и разбить их соответствующим образом: 

<div style="float:left">
 <div>Myst(?)</div>
 <div>Airplane</div>
 <div>Symba</div>
</div>
<div style="float:right">
 <div>Coastline</div>
 <div>Painter</div>
 <div>Chewbacca(?)</div>
</div>

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

...