在HTML / CSS中最好的方法做列 [英] Best Way to do Columns in HTML/CSS

问题描述

我正在寻找一种显示3列内容的方法。我找到了一种方式来显示换行列，但我不想这个页面。我在寻找一种方式说

I'm looking for a way to display 3 columns of content. I've found a way to display wrap-around columns, but I don't want that for this page. I'm looking for a way to say

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

3次，并且彼此相邻显示3列。我最喜欢的例子是The Verge（http://www.theverge.com/）。

3 times, and have 3 columns displayed beside each other. The best example I have offhand is The Verge (http://www.theverge.com/). What is the best way to do this?

推荐答案

我建议你使用< table> ; 或CSS。

I would suggest you to either use <table> or CSS.

CSS更为灵活。一个例子是：

CSS is preferred for being more flexible. An example would be:

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

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

使用float：left会使3列彼此粘连，从中心的div框。

Using float:left would make 3 columns stick to each other, coming in from left inside the centered div "content box".

这篇关于在HTML / CSS中最好的方法做列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！