在HTML / CSS中做列的最佳方法

一尘不染

在HTML / CSS中做列的最佳方法

css

我正在寻找一种显示3列内容的方法。我找到了一种显示环绕列的方法，但是我不希望在此页面上显示。我正在寻找一种说法

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

3次，并在彼此之间显示3列。我最好的例子是The Verge（http://www.theverge.com/）。做这个的最好方式是什么？

阅读 367

2020-05-16

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

使用float：left会使3列相互粘连，并从居中的div“内容框”中的左侧开始进入。

2020-05-16