Два ряда элементов с плавающей точкой справа

Question

Два ряда элементов с плавающей точкой справа

0

Я работаю над гибким веб-дизайном, который позиционирует divs плавающим вправо, но в два ряда. Как только контейнер div станет двумя узкими, разделители плитки будут перемещаться вниз, чтобы сформировать новую строку.

Например

<div id="container">
    <div class="tile"></div>
    <div class="tile"></div>
    <div class="tile"></div>
    <div class="tile"></div>
    <div class="tile"></div>
</div>


.tile {
    height:96px;
    width:96px;
 }

Отобразится три div в первой строке и еще две строки в первой строке.

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

Благодарю!

Chris Woodle 17 фев. 2014, в 00:32

Источник

2

В чем вопрос?
Andrei B 16 фев. 2014, в 22:52

Теги:

javascript

jquery

html

css

css-float

3 ответа

0

Вы должны добавить свойство "float: left" в ваш class="tile", иначе он просто отобразит все div один ниже другого.

Благодарю.

Kirti 18 фев. 2014, в 10:01

0

Я предполагаю, что вы ищете это?

.tile {
    height:96px;
    width:96px;
    float: left;
 }

Andrei B 16 фев. 2014, в 20:21

Ещё вопросы

Vickel · Accepted Answer · 2014-02-16T21-48-00.000Z

вам нужно вложить первые 3 divs и 2 div div. Вам также нужно "разделить" эти 2 divs, поэтому они строят 2 строки (сделанные с помощью css:clear), чтобы добиться того, что вы притворяетесь:

HTML:

<div id="container">
  <div class="firstrow">
    <div class="tile"></div>
    <div class="tile"></div>
    <div class="tile"></div>
  </div>

<div class="clear"></div>

   <div class="secondrow">
    <div class="tile"></div>
    <div class="tile"></div>
  </div>
</div>

CSS:

.tile {
    height:96px;
    width:96px;
    float:right;
    border: 1px solid red;
 }
.clear{clear:both;}

см. пример здесь: http://jsfiddle.net/hbrunar/R59Qe/1/

Я попробовал то же самое решение и близок к тому, что я пытаюсь достичь. Единственная проблема заключается в поддержке более или менее пяти плиток. Я пытаюсь найти способ сгущения плиток далее. Например, с вашим кодом, но четыре плитки в первой строке и три во второй, когда контейнер переименован в ширину, которая может содержать только три плитки По ширине группа образует один ряд из трех плиток, ряд из одного и один последний ряд из трех. Конечный результат должен иметь два ряда по три и седьмую плитку внизу в своем собственном ряду. Спасибо!
проверьте обновление скрипки здесь: jsfiddle.net/hbrunar/R59Qe/3