在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/

使用float:left会使3列彼此粘在一起,从中心div"内容框"的左侧进入.

Answer 2

您应该考虑使用css3,尽管它确实包括使用供应商前缀.

我已经敲了一个快速的小提琴演示,但关键是这个.

<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 3

除了3浮动列结构(我也建议),你必须插入一个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; }