在HTML/CSS中实现列的最佳方法是什么？

Question

我正在寻找一种显示3列内容的方法。我已经找到了一种显示环绕式列的方法，但是我不想在这个页面上使用它。我正在寻找一种说法

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

我希望一个页面可以同时显示三列，每列循环展示三次。我能想到的最好的例子是The Verge (http://www.theverge.com/)。请问如何最佳实现？

- muttley91

---

不得不说，有时候仅仅使用老式的表格元素是以行和列格式化内容最简单的方法。我知道你正在寻找CSS的方法，所以决定添加评论而不是答案。 - Dan P

@TheJumpingFrog 我使用了float，但是我发现在不同的屏幕尺寸上会产生不一致的行为。是否有一种方法可以使用float方法来始终以固定格式显示？ - muttley91

@DanP 我目前也在尝试使用表格，但是我遇到了居中的问题（不知为何，Bootstrap CSS 可能会影响它），所以我想在进一步与表格斗争之前先去寻找其他解决方法。 - muttley91

@rar：为了将表格居中，您可以在 CSS 中使用以下代码：table { margin: auto; width: 100%; } - hjpotter92

这里有一个很好的关于双列布局的解释：http://codenuggets.com/2014/05/22/css-two-column-layout/ - Jeff

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可以使得三列贴在一起，从左边进入位于中心的"content box" div。

- AbSoLution8

---

我认为你想要将 width 放在样式属性内：style="margin:0 auto; width: 70%;"。此外，我不知道有哪些浏览器会在默认样式表中对 div 应用 margin，因此在浮动的 div 上使用 margin: 0; 似乎是多余的。 - steveax

我想补充一下，我发现Mikey的回答对于我的个人格式问题是必需的。未来的读者，请查看Mikey的回答以及这个回答。 - muttley91

你还可以使用CSS Grid和CSS Flex，它们都可以根据屏幕大小保持列的位置和大小比例，而Flex还可以在屏幕大小太小时轻松重新排列列，以便它们可以良好地保持最小宽度。请参见https://css-tricks.com/snippets/css/complete-guide-grid/和https://css-tricks.com/snippets/css/a-guide-to-flexbox/。 - John

Answer 2

尽管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>

- EightyOne Unite

---

你可能会发现在w3schools上了解浏览器支持情况很有用；IE10+。我必须等待更好的浏览器支持。 - Duncanmoo

@Duncanmoo的链接已经失效，请尝试使用这个链接：http://caniuse.com/multicolumn - 目前仅有大约14%的浏览器支持（使用前缀则为76%）。 - naught101

希望我能编辑旧评论，这里是关于浏览器支持的w3schools链接。 - Duncanmoo

很酷！正是我需要的！ - Worker

现在它得到了广泛的支持（约83%）。请查看caniuse以获取浏览器支持情况。 - Buzut

现在已经有97.8%的浏览器支持CSS列选项。在这里查看更多关于CSS列选项的内容：https://kolosek.com/css-columns/ - Nesha Zoric

Answer 3

除了三个浮动列结构（我也建议使用），您还需要插入一种清除浮动的方法，以防止在列容器之后出现布局问题（可以说是保持列容器在流中...）。

<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; }

- Frank van Wijk

---

不用客气。请记住，这是解决浮动元素（如 ul 菜单）布局问题的常见方法。 - Frank van Wijk

我一定会记下来的，因为这不是我第一次遇到这个问题了。谢谢！ - muttley91

使用clearfix是很常见的，但如果你有一个围绕着三列的包裹器，你可以将该包裹器（在这种情况下是#contentBox）设置为overflow:auto;。这会使#contentBox扩展以容纳三列，而不管它们的高度如何，从而向下推动下面的内容。这是一个更清洁的解决方案，并且需要在HTML中使用较少的类。 - InanisAtheos

@PatrikAlienus 这是一个很好的提示。然而，使用overflow: auto会在#contentBox div上放置滚动条。您可以改用overflow hidden或设置子节点的高度。 - Srikanth Kondaparthy

@SrikanthKondaparthy 确实有一些情况下滚动条可能会出现 - 在某些浏览器中。但通常有解决方法。然而，'overflow:hidden'将隐藏浮动的div，所以我真的不知道这怎么能解决它？如果您知道高度，则始终可以设置高度。对于动态内容，这也不是一个解决方案。 - InanisAtheos

Answer 4

你也可以尝试一下。

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

参考链接：http://codepen.io/co0kie/pen/gPKNWX?editors=1100

这个示例展示了如何使用CSS3动画和JavaScript在网页中创建一个交互式的时钟。该时钟包括小时、分钟和秒针，可以自动更新时间。此外，该时钟还具有可调节的大小和颜色等属性，用户可以根据需要进行自定义设置。

- co0kie

Answer 5

Bootstrap。请在这里查看其精美的网格系统。

使用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>

- bhekman

Answer 6

如果你想在这里做多个（3+）列，这是一个非常好的代码片段，它可以完美地工作并验证为有效的HTML5：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Multiple Colums</title>

        <!-- Styles -->
        <style>
            .flex-center {
                width: 100%;
                align-items: center;/*These two properties center vetically*/
                height: 100vh;/*These two properties center vetically*/
                display: flex;/*This is the attribute that separates into columns*/
                justify-content: center;
                text-align: center;
                position: relative;
            }
            .spaceOut {
                margin-left: 25px;
                margin-right: 25px;
            }
        </style>

    </head>
    <body>
        <section class="flex-center">
            <h4>Tableless Columns Example</h4><br />
            <div class="spaceOut">
                Column 1<br />
            </div>
            <div class="spaceOut">
                Column 2<br />
            </div>
            <div class="spaceOut">
                Column 3<br />
            </div>      
            <div class="spaceOut">
                Column 4<br />
            </div>
            <div class="spaceOut">
                Column 5<br />
            </div>
        </section>
    </body>
</html>

- user2288580

---

去掉 align-items: center; 可以防止列标题被向下推。 - Vass

Answer 7

你还可以使用CSS Grid和CSS Flex，两者都可以根据屏幕大小保持列的位置和大小比例，而flex还可以在屏幕大小太小时轻松重新排列列，以便它们可以很好地保持最小宽度。

请参阅这些指南获取完整详情：

• https://css-tricks.com/snippets/css/complete-guide-grid/
• https://css-tricks.com/snippets/css/a-guide-to-flexbox

网格：

.container {
  display: grid | inline-grid;
}

Flex：

.container {
  display: flex | inline-flex;
}

- John