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

我目前正在更新一个相当旧的网站（上次更新是在 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; }

你的CSS应该是这样的：

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

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

有关更多详细信息，您必须阅读这篇有趣的文章article.

请参阅此演示：http://jsfiddle.net/akhurshid/YRWLV/