一个干净的CSS3 3列布局，从哪里开始？ [英] A clean CSS3 3-column layout, where to start?

问题描述

我目前正在更新一个漂亮的旧网站（上次更新时间是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; } 
  
 
 
 
 
 
 CSS float属性的目的一般是将块级元素向左或向右推，将其从与其他块元素相关的流中取出。这允许自然流动的内容环绕浮动元素。这个概念与打印文学中每天看到的相似，其中照片和其他图形元素对齐在一边，而其他内容（通常是文本）自然地在左对齐或右对齐元素周围流动。
 
 
有关详情，您必须阅读此细节  article  。 
 
 
 
查看此演示： http://jsfiddle.net / akhurshid / YRWLV /  
 
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; }



  
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.
For More details you must have to read this intresting article. 

See This Demo: http://jsfiddle.net/akhurshid/YRWLV/

                        
这篇关于一个干净的CSS3 3列布局，从哪里开始？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！