Css Float проблема, разные высоты деления - PullRequest
Новая
       2

Css Float проблема, разные высоты деления

3 голосов
/ 17 апреля 2011

Мне было интересно, есть ли в любом случае плавающие много div с разными высотами рядом друг с другом без эффекта нажатия,

Например:!

||||||||| 2 |||||||||||
||||||||||||||||||| 3 ||
|| 1 ||||||||||
|||||||? ||||||||
||||||||| 4 ||||
|||||||||

проблема в пустом пространстве под div 2, потому что div3 выше div2, поэтому он выталкивает div4, оставляя уродливые пробелы

код: 

<div class=container>

<div class=box>1</div>
<div class=box>2</div>
<div class=box>3</div>
<div class=box>4</div>

</div>

я пытаюсь заставить div .container плавно перемещать любое количество элементов div внутри, и все границы касаются друг друга без этого эффекта нажатия,

есть ли способсделать это ?Я попробовал плагин jQuery Masonry, но мог бы понять это: (..

Ты очень за помощь

Ответы [ 3 ]

1 голос
/ 17 апреля 2011

Проверьте это. Это может решить вашу проблему: 

<div id="container" style="height:300px;width:308px;background:#ddd;border:1px solid red;float:right"">
  <div class="box" style="height:175px;width:100px;background:#CF9;border:1px solid #C0C;float:right">3</div>
  <div class="box" style="height:150px;width:100px;background:orange;border:1px solid #404040;float:right">2</div>
  <div class="box" style="height:300px;width:100px;background:green;border:1px solid yellow;float:left">1</div>
  <div class="box" style="height:145px;width:100px;background:blue;border:1px solid #F03;float:right">4</div>
</div>

Здесь я использовал цвета и границы для наглядности.

1 голос
/ 07 июня 2011

Я написал простой скрипт jQuery, который делает свое дело. Это даже работает для контейнера / страницы переменной ширины, поэтому вам не нужно заключать строки в отдельные контейнеры. Давайте посмотрим и дайте мне знать, если это то, что вам нужно:

http://demo.petiar.sk/smartfloat/

Спасибо, Petiar.

1 голос
/ 17 апреля 2011

Это стандартное поведение CSS для плавающих элементов. Если вам не нужно пространство между (2) и (4), то вам может понадобиться float (2), а затем поместить div для содержимого (2) и еще один div для (4), чтобы они были " вместе "(вертикально).

И я думаю, это зависит от того, что вы хотите сделать и достичь. Возможно, вы также захотите сделать все div одинаковой высоты с фоном или рамкой, чтобы они плавали без визуального пустого пространства. (но там будет место, если содержимое внутри не заполняет div.

Кроме того, вы можете захотеть плавать 1 div, а затем плавать (1), (2) и (3) внутри него, а затем плавать (4) отдельно ... но на самом деле это зависит от того, что вы хотите делаем.

...