div на 3 столбца с использованием float

Question

Я пытаюсь разместить 6 разделов разной высоты на 3 столбцах.

Я использую свойство float для divs слева и справа и поля: 0 auto для центральных div.

Используя свойство clear, я разместил вторую строку divs под первой, но я хочу, чтобы каждый div находился под div с одинаковой опцией float, без пробела между ними.

Вместо этого они выровнены нижний div.

Вот скрипку: fiddle

div { 
 
    border: 1px solid red; 
 
    width: 30%; 
 
} 
 
.left { 
 
    float: left; 
 
    height: 200px; 
 
} 
 
.right { 
 
    float: right; 
 
    height: 100px; 
 
} 
 
.center { 
 
    margin: 0 auto; 
 
    height: 50px; 
 
}

<div class="left">left-top</div> 
 
<div class="right">right-top</div> 
 
<div class="left" style="clear:left">left-bottom</div> 
 
<div class="right" style="clear:right">right-bottom</div> 
 
<div class="center">center-top</div> 
 
<div class="center">center-bottom</div>

Спасибо за помощь,

Piero.

Answer 1

Поместите их в 3 колонки/DIVS 33,33% в ширину, которые вы Float:

https://jsfiddle.net/8Lbc5pq7/4/

HTML:

<div class="column"> 
<div class="left">left-top</div> 
<div class="left">left-bottom</div> 
</div> 
<div class="column"> 
<div class="center">center-top</div> 
<div class="center">center-bottom</div> 
</div> 
<div class="column"> 
<div class="right">right-top</div> 
<div class="right" style="clear:right">right-bottom</div> 
</div> 

CSS:

div { 
    border: 1px solid red; 
    width: 95%; 
} 
.column { 
    float: left; 
    border: none; 
    width: 33.33%; 
} 

.left { 
    float: left; 
    height: 200px; 
} 

.right { 
    float: right; 
    height: 100px; 
} 

.center { 
    margin: 0 auto; 
    height: 50px; 
} 

Answer 2

попробуйте использовать этот стиль:

div { 
    border: 1px solid red; 
    width: 30%; 
    display:inline-block; 
} 

.left { 
    float: left; 
    height: 200px; 
} 



.center { 
    margin: 0 auto; 
    height: 50px; 
} 

Answer 3

Вы можете попробовать это.

HTML код

<div class="left">left-top</div> 
<div class="right">right-top</div> 
<div class="left">left-bottom</div> 
<div class="clearfix"></div> 
<div class="right">right-bottom</div> 
<div class="center">center-top</div> 
<div class="center">center-bottom</div> 

Css Код

.left, .right, .center {border: 1px solid red;width: 30%;margin:2px;} 
.clearfix{clear:both;} 
.left {float:left;} 
.right { float:left;} 
.center {float:left;} 

проверка скрипку https://jsfiddle.net/Dhavalr/9cyq8tu9/

Answer 4

Please try this code 

<style> 
div { 
    border: 1px solid gray; 
    width: 33.1%; 
} 
.left { 
    float: left; 
    height: 200px; 
} 
.right { 
    float: left; 
    height: 100px; 
} 
.center { 
    margin: 0 auto; 
    float:left; 
    height: 50px; 
} 
</style> 
<div class="left">left-top</div> 
<div class="center">center-top</div> 
<div class="right">right-top</div> 
<div style="clear:both;"></div> 
<div class="left" style="clear:left;">left-bottom</div> 
<div class="center">center-bottom</div> 
<div class="right" style="clear:right;">right-bottom</div>