Div плавающая задача

Question

http://jsbin.com/aruvo4/5

Как я могу заставить 3-й div сразу перейти под первый div?

Answer 1

Вот решение CSS3 для вас:

#wrapper { width: 200px; overflow: auto; }
#wrapper div { float: left; background: pink; min-height: 80px; width: 80px; margin: 5px; padding: 4px; }
#wrapper div:nth-child(2) { float: right; }

Однако для кросс-браузерного решения вам нужно будет добавить класс в div, который я поместил прямо

: поддержка браузера nth-child

IE8   FF3.5+  SA3.1+  OP9.5+  CH2+
None  Full    Full    Full    Full

- edit -

Просто прочитайте еще несколько комментариев здесь и увидите, что вы не можете использовать псевдокласс.Я оставлю здесь ответ, так как он будет работать в других случаях.

Answer 2

Вы можете добавить float:right; для примера #wrapper .long

: http://jsbin.com/aruvo4/4

Также добавьте overflow:auto для вашего #wrapper, чтобы очистить поплавки.http://www.quirksmode.org/css/clearing.html

Answer 3

<div class="small_divs">
</div>
<div class="small_divs">
</div>
<div class="small_divs">
</div>
<div id="big_div>
</div>

#big_div { float:right;}

Answer 4

Организуйте его так же, как таблицу (т.е. разместите теги div вокруг ваших «строк») и установите свойства отображения div на table-row и table-cell в зависимости от ситуации.Длинная ячейка должна иметь top и bottom = 0 и положение, установленное на абсолютное значение.Там также должна быть пустая ячейка, содержащая место длинной, позволяющей ей растягиваться вниз.

Вот полное объяснение .