Блог

У меня есть два столбца div (ColumnA и ColumnB) внутри основного родительского div. В этих двух столбцах используется float:left. ОК, нет проблем. работает.

Теперь внутри ColumnB я хочу еще 3 отдельных столбца (Column1, 2, 3).

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

Есть ли способ очистить только через ColumnB, а не вплоть до основного родительского div?

Вы можете ничего не очищать и добавить overflow: hidden в свой основной родительский div. Проверьте этот jsFiddle.

Вот код:

 .Container
{
    overflow: hidden;
}
.Col1
{
    float: left;
    width: 50%;
}
.Col2
{
    float: left;
    width: 50%;
}
.Col2a
{
    float: left;
    width: 33%;
}
.Col2b
{
    float: left;
    width: 33%;
}
.Col2c
{
    float: left;
    width: 33%;
}

<div class="Container">
    <div class="Col1">
        <p>Column 1</p>
    </div>
    <div class="Col2">
        <p>Column 2</p>
        <div class="Col2a">2a</div>
        <div class="Col2b">2b</div>
        <div class="Col2c">2c</div>
    </div>
</div>