在 HTML/CSS 中做列的最佳方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9966890/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Best Way to do Columns in HTML/CSS
提问by muttley91
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
我正在寻找一种显示 3 列内容的方法。我找到了一种显示环绕列的方法，但我不希望此页面出现这种情况。我在寻找一种表达方式
<column>
<!-- content -->
</column>
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?
3 次，并有 3 列并排显示。我手头上最好的例子是 The Verge (http://www.theverge.com/)。做这个的最好方式是什么？
采纳答案by AbSoLution8
I would suggest you to either use <table>or CSS.
我建议您使用<table>或 CSS。
CSS is preferred for being more flexible. An example would be:
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/
jsFiddle：http: //jsfiddle.net/ndhqM/
Using float:left would make 3 columns stick to each other, coming in from left inside the centered div "content box".
使用 float:left 会使 3 列相互粘连，从居中的 div“内容框”内的左侧进入。
回答by EightyOne Unite
You should probably consider using css3 for this though it does include the use of vendor prefixes.
您可能应该考虑为此使用 css3，尽管它确实包括使用供应商前缀。
I've knocked up a quick fiddleto demo but the crux is this.
我已经敲了一个快速的小提琴来演示，但关键是这个。
<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>
回答by Frank van Wijk
In addition to the 3 floated column structure (which I would suggest as well), you have to insert a clearfix to prevent layoutproblems with elements after the columncontainer (keep the columncontainer in the flow, so to speak...).
除了 3 个浮动列结构（我也建议这样做）之外，您还必须插入一个 clearfix 以防止在 columncontainer 之后出现元素布局问题（保持 columncontainer 处于流中，可以这么说......）。
<div id="contentBox" class="clearfix">
....
</div>
CSS:
CSS：
.clearfix { zoom: 1; }
.clearfix:before, .clearfix:after { content: ".col{
float: left;
}
.col + .col{
float: left;
margin-left: 20px;
}
/* or */
.col:not(:nth-child(1)){
float:left;
margin-left: 20px;
}
20"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
回答by co0kie
You might also try.
你也可以试试。
<div class="row">
<div class="col">column</div>
<div class="col">column</div>
<div class="col">column</div>
</div><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>
ref: http://codepen.io/co0kie/pen/gPKNWX?editors=1100
参考：http: //codepen.io/co0kie/pen/gPKNWX?editors= 1100
回答by bhekman
回答by John
You also have CSS Grid and CSS Flex, both can give you columns that keep their position and size ratios depending on screen size, and flex can also easily rearrange the columns if screen size is too small so they can maintain a minimum width nicely.
您还有 CSS Grid 和 CSS Flex，两者都可以为您提供根据屏幕尺寸保持位置和大小比例的列，如果屏幕尺寸太小，Flex 还可以轻松地重新排列列，以便它们可以很好地保持最小宽度。
See these guides for full details:
有关完整详细信息，请参阅这些指南：
- https://css-tricks.com/snippets/css/complete-guide-grid/
- https://css-tricks.com/snippets/css/a-guide-to-flexbox
- https://css-tricks.com/snippets/css/complete-guide-grid/
- https://css-tricks.com/snippets/css/a-guide-to-flexbox
Grid:
网格：
.container {
display: flex | inline-flex;
}
Flex:
柔性：
<!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>
回答by user2288580
If you want to do multiple (3+) columns here is a great snippet that works perfectly and validates as valid HTML5:
如果你想做多个 (3+) 列，这里有一个很棒的片段，可以完美运行并验证为有效的 HTML5：
##代码##