Html 一个干净的 CSS3 3 列布局，从哪里开始？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11451142/
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
A clean CSS3 3-column layout, where to start?
提问by Jean-Marie Comets
I'm currently updating a pretty old website (last update was around 2001), and have agreed to use HTML5 and CSS3.
我目前正在更新一个相当古老的网站（上次更新是在 2001 年左右），并同意使用 HTML5 和 CSS3。
For the general design, I'm working on a very clean white and gray tones style, with many paddings and margins. My problem resides in the home page: I'd like to have a 3-column centered layout. But where to start? I've tried some floating, but in vain.
对于一般设计，我正在研究一种非常干净的白色和灰色色调样式，带有许多填充和边距。我的问题在于主页：我想要一个 3 列居中布局。但是从哪里开始呢？我试过一些浮动，但徒劳无功。
Am I doing this right ?
我这样做对吗？
HTML:
HTML：
<div class="colwrapper">
<div class="ltcol"></div>
<div class="ctcol"></div>
<div class="rtcol"></div>
</div>
CSS:
CSS：
.colwrapper { width:1020px; }
.ltcol, .ctcol, .rtcol { width:300px; margin:0 10px; padding:10px; }
.ltcol { float:left; }
.ctcol { margin-left:340px; }
.rtcol { float:right; }
采纳答案by Ahsan Khurshid
your css should be like this:
你的 css 应该是这样的：
.ltcol, .ctcol { float:left; }
.rtcol { float:right; }
The purpose of the CSS float property is, generally speaking, to push a block-level element to the left or right, taking it out of the flow in relation to other block elements. This allows naturally-flowing content to wrap around the floated element. This concept is similar to what you see every day in print literature, where photos and other graphic elements are aligned to one side while other content (usually text) flows naturally around the left- or right-aligned element.
CSS float 属性的目的，一般来说，将块级元素向左或向右推送，将其从与其他块元素相关的流中移除。这允许自然流动的内容环绕浮动元素。这个概念类似于您每天在印刷文献中看到的内容，其中照片和其他图形元素与一侧对齐，而其他内容（通常是文本）自然地围绕左对齐或右对齐元素流动。
For More details you must have to read this intresting article.
有关更多详细信息，您必须阅读这篇有趣的文章。
See This Demo: http://jsfiddle.net/akhurshid/YRWLV/
看到这个演示：http: //jsfiddle.net/akhurshid/YRWLV/
回答by Jason Allen
Your HTML is very clean - this is a great step forward.
您的 HTML 非常干净 - 这是向前迈出的一大步。
You need to add a float: leftto all the columns. To ensure the float is cancelled after your columns, it is best to add a cleardiv after the floated columns.
您需要将 a 添加float: left到所有列。为了确保在您的列之后取消浮动，最好clear在浮动列之后添加一个div。
HTML:
HTML：
<div class="colwrapper">
<div class="ltcol">Column 1</div>
<div class="ctcol">Column 2</div>
<div class="rtcol">Column 3</div>
<div class="clear"></div>
</div>?????????????????
CSS:
CSS：
.colwrapper { width:1020px; }
.ltcol, .ctcol, .rtcol { width:300px; margin:0 10px; padding:10px; background-color: #efefef }
.ltcol { float:left; }
.ctcol { float:left; }
.rtcol { float:left; }
.clear { clear: left; }
?
?
回答by Mateusz Rogulski
So you add css3tag for this questio so I suggest you to make this with css3 column layout:
所以你css3为这个问题添加了标签，所以我建议你用 css3 列布局来做这个：
for example
例如
HTML
HTML
<div class="colwrapper">
<div>text</div>
</div>
CSS
CSS
.colwrapper div
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
}
It does not work on IE.
它不适用于 IE。
回答by techfoobar
Use one of these tried and tested implementations instead of rolling out your own. In addition to the fact that you'll be getting tested and working code, you'll add responsiveness to your site with almost zero effort.
使用这些久经考验的实现之一，而不是推出您自己的。除了您将获得测试和工作代码这一事实之外，您还将几乎零努力地为您的站点添加响应能力。
and lots more if you google..
如果你谷歌，还有更多......
回答by darcher
could also use Flexbox property for this now as well so you don't need to worry about floats or clearfix's.
现在也可以为此使用 Flexbox 属性，因此您无需担心浮点数或 clearfix 的问题。
main{
/* .colwrapper{ */
display: flex;
flex-flow: row;
justify-content: center;
}
main > section{
/* .ltcol,.ctcol,.rtcol{ */
display:flex;
flex-flow:column;
align-items:center;
padding:10px; padding:.625rem;
}
main > section:nth-child(2){
/* .ctcol{ */
margin:0 20px; margin:0 1.25rem;
}
http://caniuse.com/flexboxshows the support for it isn't quite as far along as you would probably like, however, there are ways to improve support by mixing old versions of the syntax with the new http://css-tricks.com/using-flexbox/has a great write up on it from Chris Coyier if you want to play with this for a next project (this post is fairly old). You can also get more details at http://html5please.com/#flexbox
http://caniuse.com/flexbox显示对它的支持并不像您所希望的那么远，但是，有一些方法可以通过将旧版本的语法与新的http://css混合来改进支持-tricks.com/using-flexbox/如果你想在下一个项目中使用它，Chris Coyier写了一篇很棒的文章（这篇文章已经很老了）。您还可以在http://html5please.com/#flexbox获取更多详细信息
Also, if you're using HTML5 I'd probably go with sections over divs for a more semantic structure, so a comparison would look something like this:
此外，如果您使用的是 HTML5，我可能会使用 div 上的部分以获得更具语义的结构，因此比较将如下所示：
<main>
<section></section><!-- or <nav></nav> -->
<section></section><!-- or <article></article> -->
<section></section><!-- or <aside></aside> -->
</main>
instead of...
<div class="colwrapper">
<div class="ltcol"></div>
<div class="ctcol"></div>
<div class="rtcol"></div>
</div>
回答by odupont
Just try putting the rtcol div beofre le ltcol div.
只需尝试将 rtcol div 放在 ltcol div 之前。
<div class="colwrapper">
<div class="rtcol">X</div>
<div class="ltcol">X</div>
<div class="ctcol">X</div>
</div>?
