在HTML / CSS中执行列的最佳方式
我正在寻找一种方法来显示3列的内容。 我find了一种方法来显示环绕的列，但我不希望这个页面。 我正在寻找一种方式来说
<column> <!-- content --> </column> 3次，并有3列彼此相邻显示。 我最近的例子是The Verge（http://www.theverge.com/）。 做这个的最好方式是什么？
我build议你使用<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/
使用float：left将使3列彼此粘在一起，从居中的div“内容框”中的左侧进入。
你可能应该考虑使用css3，尽pipe它包括使用供应商前缀。
我已经敲了一个快速演示，但关键是这个。
<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>
除了3浮动列结构（我也build议），你必须插入一个清晰的修正，以防止columncontainer之后的元素的layoutproblems（保持columncontainer在stream程中，可以这么说…）。
<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; }
你也可以试试。
.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>
引导。 看看他们的真棒网格系统在这里 。
使用Bootstrap，你可以做三个这样的列：
<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>
