浮動小数点数を使用して3列のdiv

Question

3列に異なる高さの6つのdivを配置しようとしています。

私は左と右のdivsにはfloatプロパティを使用し、中央のdivはmargin：0のautoを使用します。

clearプロパティを使用して、divの2番目の行を最初の行の下に配置しましたが、divの下に同じfloatオプションを使用してdivの間に空白スペースを入れません。

代わりに、最も低い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>

おかげで、

ピエロ：

はここでフィドルです。

Answer 1

3列あなたが浮く/ div要素33.33パーセントワイドに入れ：

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

あなたはこの1つを試すことができます。

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>