乾淨的CSS3 3列布局，從哪裏開始？

我目前正在更新一個漂亮的舊網站（最新更新大約在2001年），並同意使用HTML5和CSS3。乾淨的CSS3 3列布局，從哪裏開始？

對於一般設計，我正在研究非常乾淨的白色和灰色色調風格，有很多填充和邊距。我的問題駐留在主頁：我想有一個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; }

來源

2012-07-12 Jean-Marie Comets

看看[960網格系統]（http://960.gs/）。 – Chris 2012-07-12 11:52:18

你的CSS應該是這樣的：

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

CSS的float屬性的目的，一般來說，將塊級元素向左或向右推，從t中取出他相對於其他塊元素流動。這允許自然流動的內容環繞浮動元素。這個概念與您在印刷文獻中每天看到的相似，其中照片和其他圖形元素對齊到一邊，而其他內容（通常是文本）自然地圍繞左對齊或右對齊元素流動。

因爲你必須要讀這個intresting article更多細節。

看到這個演示：http://jsfiddle.net/akhurshid/YRWLV/

來源

2012-07-12 11:52:05

已經有了，但我有一些奇怪的錯誤：我的浮動元素被定位在下而不是彼此相鄰。 – 2012-07-12 11:58:45

@讓 - 瑪麗彗星：看到這個演示：http://jsfiddle.net/akhurshid/YRWLV/ – 2012-07-12 12:02:01

這jsfiddle以某種方式爲我工作，奇怪的錯誤消失了，一切都恢復正常。 – 2012-07-12 12:07:11

剛剛嘗試把rtcol DIV beofre樂ltcol格。

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

http://jsfiddle.net/EDjpy/

來源

2012-07-12 11:54:16 odupont

你的HTML很乾淨 - 這是向前邁進了一大步。

您需要將float: left添加到所有列。爲確保浮動列在列後取消，最好在浮動列之後添加一個clear div。

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：

.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; }

來源

2012-07-12 11:56:20

這不是，我實際上upvoted，清晰的div是一個有用的提示=） – 2012-07-12 12:04:09

爲什麼我需要添加'float：left'到所有列？ – Christoph 2012-07-12 12:06:05

感謝您的支持。有一點需要注意的是寬度與填充的使用。有些瀏覽器在寬度上包含填充，其他瀏覽器則不包含。確保您的列保留在所有瀏覽器的一行上。 – 2012-07-12 12:08:50

所以你添加css3標籤此questio所以我建議你用CSS3列布局使這個：

More info

例如

HTML

<div class="colwrapper"> 
    <div>text</div> 
</div>

CSS

.colwrapper div 
{ 
    -moz-column-count:3; /* Firefox */ 
    -webkit-column-count:3; /* Safari and Chrome */ 
    column-count:3; 
}

它不能在IE瀏覽器。

來源

2012-07-12 11:58:28

使用這些久經考驗的實現之一，而不是推出自己的。除了您將獲得測試和工作代碼之外，您幾乎可以毫不費力地爲您的網站添加響應能力。

，如果你谷歌其它更多..

來源

2012-07-12 11:59:05 techfoobar

我也建議從Twitter（http://getbootstrap.com/）或基金會Zurb（http://foundation.zurb.com/ ）如果你打算使用初學者框架。 – darcher 2013-11-16 19:33:38

也可以使用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/flexbox顯示了它的支持是不是很順，你可能會喜歡的，但是，也有通過語法的舊版本混合與新http://css-tricks.com/using-flexbox/改善支持方式就具有很大的向上寫從克里斯Coyier如果你想玩這個下一個項目（這篇文章是相當古老）。您也可以在http://html5please.com/#flexbox

瞭解更多詳情此外，如果你使用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>

來源

2013-11-16 19:16:49 darcher

乾淨的CSS3 3列布局，從哪裏開始？

回答

相關問題