一个干净的CSS3 3列布局,从哪里开始？

Question

我目前正在更新一个非常古老的网站(最新更新是在2001年左右),并同意使用HTML5和CSS3.

对于一般设计,我正在使用非常干净的白色和灰色调样式,有许多填充和边距.我的问题在于主页:我想要一个以3列为中心的布局.但从哪里开始？我试过一些漂浮,但是徒劳无功.

我这样做了吗？

HTML:

<div class="colwrapper">
    <div class="ltcol"></div>
    <div class="ctcol"></div>
    <div class="rtcol"></div>
</div>

CSS:

.colwrapper { width:1020px; }
.ltcol, .ctcol, .rtcol { width:300px; margin:0 10px; padding:10px; }
.ltcol { float:left; }
.ctcol { margin-left:340px; }
.rtcol { float:right; }

Answer 1

你的CSS应该是这样的:

.ltcol, .ctcol { float:left; }
.rtcol { float:right; }

一般来说,CSS浮动属性的目的是向左或向右推送块级元素,将其从流中相对于其他块元素取出.这允许自然流动的内容环绕浮动元素.这个概念类似于您在印刷文献中每天看到的内容,其中照片和其他图形元素在一侧对齐,而其他内容(通常是文本)自然地围绕左对齐元素或右对齐元素流动.

有关详细信息,您必须阅读这篇有趣的文章.

见本演示:http://jsfiddle.net/akhurshid/YRWLV/