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

问题描述

我目前正在更新一个漂亮的旧网站（上次更新时间是2001年左右），并同意使用HTML5和CSS3。

工作在非常干净的白色和灰色色调风格，有许多paddings和边缘。我的问题存在于主页：我想有一个3列居中布局。但是从哪里开始？

$ b

HTML：

/ p>

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

CSS：

 code> .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; } 
  
 
 
 
有关详情，您必须阅读此细节  。 
 
 
 
查看此演示： 
 
I'm currently updating a pretty old website (last update was around 2001), and have agreed to use HTML5 and 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.
Am I doing this right ?
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; }
 解决方案 
your css should be like this:
.ltcol, .ctcol { float:left; }
.rtcol { float:right; }
For More details you must have to read this intresting article. 
See This Demo: http://jsfiddle.net/akhurshid/YRWLV/
                        
这篇关于一个干净的CSS3 3列布局，从哪里开始？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！