HTML/CSSの列を行う最善の方法

Question

私はコンテンツの3列を表示する方法を探しています。ラップアラウンドカラムを表示する方法を見つけましたが、このページでは必要ありません。私は言うべき道を探しています

<column> 
<!-- content --> 
</column> 

3回、お互いに3列表示されています。私が主張している最良の例はThe Verge（http://www.theverge.com/）です。これを行う最善の方法は何ですか？

Answer 1

<table>またはCSSを使用することをお勧めします。

CSSは柔軟性が高いため、例は次のようになります。

<!-- of course, you should move the inline CSS style to your stylesheet --> 
<!-- main container, width = 70% of page, centered --> 
<div id="contentBox" style="margin:0px auto; width:70%"> 

<!-- columns divs, float left, no margin so there is no space between column, width=1/3 --> 
    <div id="column1" style="float:left; margin:0; width:33%;"> 
    CONTENT 
    </div> 

    <div id="column2" style="float:left; margin:0;width:33%;"> 
    CONTENT 
    </div> 

    <div id="column3" style="float:left; margin:0;width:33%"> 
    CONTENT 
    </div> 
</div> 

jsFiddle：http://jsfiddle.net/ndhqM/

フロートを使用して：3列が中心のdiv「コンテンツボックス」内の左から入ってくる、お互いに固執するだろう残しました。

Answer 2

3フロートの列構造（これも私もお勧めします）に加えて、columncontainerの後ろにある要素のlayoutproblemsを防ぐためにclearfixを挿入する必要があります（つまり、フロー内にcolumncontainerを保持します...） 。

<div id="contentBox" class="clearfix"> 
.... 
</div> 

CSS：

.clearfix { zoom: 1; } 
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; } 
.clearfix:after { clear: both; } 

Answer 3

あなたはおそらく、それはベンダー接頭辞の使用を含んんが、このためにCSS3を使用して検討すべきです。

私はデモのために素早くfiddleをノックアップしましたが、その要点はこれです。

<style> 
.3col 
{ 
    -webkit-column-count: 3; 
    -webkit-column-gap: 10px; 
    -moz-column-count: 3; 
    -moz-column-gap: 10px; 
    column-count:3; 
    column-gap:10px; 
} 
</style> 
<div class="3col"> 
<p>col1</p> 
<p>col2</p> 
<p>col3</p> 
</div> 

Answer 4

ブートストラップ。彼らのすばらしいグリッドシステムhereをチェックしてください。

ブートストラップを使用して、あなたはこのように3つの列を作ることができる：

<div class="container"> 
    <div class="row"> 
    <div class="col-md-4">.col-md-4</div> 
    <div class="col-md-4">.col-md-4</div> 
    <div class="col-md-4">.col-md-4</div> 
    </div> 
</div> 

Answer 5

あなたも試してみてください。

.col{ 
 
    float: left; 
 
} 
 
.col + .col{ 
 
    float: left; 
 
    margin-left: 20px; 
 
} 
 

 
/* or */ 
 

 
.col:not(:nth-child(1)){ 
 
    float:left; 
 
    margin-left: 20px; 
 
} 
 

 

<div class="row"> 
 
    <div class="col">column</div> 
 
    <div class="col">column</div> 
 
    <div class="col">column</div> 
 
</div>

REF：あなたのスタイルシートでhttp://codepen.io/co0kie/pen/gPKNWX?editors=1100