Как получить дивы на новую линию

Смотрите следующую codepen для демонстрации: http://codepen.io/anon/pen/PGPJOG Как получить дивы на новую линию

<div class="col-1-3 bg-green">green</div> 

<div class="col-1-3 bg-green"> 

    <div class="col-1-3 bg-blue"> 
     blue<br/>blue<br/>blue<br/>blue<br/> 
    </div> 
    <div class="col-1-3 bg-blue"> 
     blue 
    </div> 
    <div class="col-1-3 bg-blue"> 
     blue 
    </div> 

</div> 

<div class="col-1-3 bg-green">green</div> 

<div class="col-1-3 bg-pink">pink</div> 
<div class="col-1-3 bg-pink">pink</div> 
<div class="col-1-3 bg-pink">pink</div>

У меня есть две строк/наборы ячеек, первая строка/набор зеленый фон, второй имеет розовый цвет. Внутри одной из ячеек (второй) в первой строке/наборе, зеленый, у меня есть вложенный ряд/набор, который имеет синий цвет.

Мой вопрос: как мне получить розовый ряд/набор, чтобы появиться на новой строке, под первым! зеленая клетка. в настоящее время розовые становятся сложены под последней зеленой ячейкой.

Я считаю, что это то, где мне нужно использовать решения clearfix, и переносить каждый набор ячеек в еще один div и называть его «строка», например. Есть ли способ сделать это без оболочки «row», я считаю, что должно быть, если ячейки составляют до 100% ширины.

Желаемый результат: http://imgur.com/a/8pdry

спасибо заранее!

источник

2016-09-10 Frank Underwood

?? вы можете удалить класс '.col-1-3' из первого div? –

Что вы хотите, чтобы конечный результат был? 3 комплекта цветов рядом друг с другом? – GabMic

3 .col-1-3 добавляет до 100% ширины, поэтому я хочу, чтобы два сначала были зелеными, а затем ниже розового. (но вложенная синяя будет в средней зеленой ячейке) Результат желания: http://imgur.com/a/8pdry –

Добавьте это после того, как 3-й зеленый DIV:

<div class="clearfix"></div>

затем добавить к вашей CSS:

.clearfix:after { 
    visibility: hidden; 
    display: block; 
    font-size: 0; 
    content: " "; 
    clear: both; 
    height: 0; 
}

Или вы можете также ясно, каждый третий + 1 .col-1-3 ребенка (без дополнительных дел) :

.col-1-3:nth-child(3n+1) { 
    clear:left; 
}

Или с понятным классом, который вы добавляете ко всем первым элементам строки:

.col-first { 
    clear:left; 
}

источник

2016-09-10 14:41:10

Это сработало, спасибо! Не уверен, что я полностью его понимаю, есть ли способ поставить его на последний зеленый div и не создавать пустой div? –

Да, я обновил ответ с помощью другого подхода (без div). –

, так что последнее последнее, должно быть ясно: слева, так как это может быть col-2-3, что является последним. –

Просто добавьте класс к первому розовому элементу, который очищает плавающий. В моем codepen я добавил класс "clearleft" на первый розовый DIV, а затем добавил следующее правило CSS:

.clearleft { 
    clear:left; 
}

Codepen: http://codepen.io/anon/pen/GjprVm

источник

2016-09-10 15:02:21 Johannes

Спасибо, Йоханнес. Зачем очищать оба, а не просто левые, если я могу спросить? –

Как я уже добавил, левые тоже работают, я как раз уже обеими уже вставлял в codepen (так что я оставил его в своем ответе), но это действительно не нужно. – Johannes

Я отредактировал свой ответ и кодеп теперь, чтобы включить только «clear: left» – Johannes

Как получить дивы на новую линию

ответ

Смежные вопросы