0
DIV我有三欄佈局，一切工作正常： http://codepen.io/cove3010/pen/dGEmaZ文本標題塊浮動權在3列布局標題
/* 1) CSS reset http://meyerweb.com/eric/tools/css/reset/ */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
\t margin: 0;
\t padding: 0;
\t border: 0;
\t font-size: 100%;
\t font: inherit;
\t vertical-align: baseline;
}
/* 2) Skeleton */
.header{
\t height:149px;
\t background: transparent url("http://www.hromov.net/templates/hromov_main/images/right_top.jpg")
\t no-repeat;
\t background-position: top right;
}
.main_cont_width {width:1003px; margin:0 auto;}
.footer {background: #D5BAE4;}
.layout { overflow: hidden;}
.col1 { background: #C7E3E4; float: left; width: 200px; }
.col2 { background: #E0D2C7; margin: 0 200px 0 200px; /* Отступ справа и слева */}
.col3 { background: #ECD5DE; width: 200px; float: right; }
/* 3) Header */
.f_l {
\t float:left;
\t
}
.f_r {
\t background-color:gold;
\t position:relative;
\t top:50px;
right:50px;
\t float:right;
}
/*4) Float divs clearfix*/
.clearfix:before,
.clearfix:after {
content: ""; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div class="main_cont_width">
<div class="header clearfix">
<img src="http://www.hromov.net/templates/hromov_main/images/guitar_top.jpg"><img src="http://www.hromov.net/templates/hromov_main/images/cassete_top.jpg">
</div>
<div class="layout">
<div class="col1"><div class="wrap">Left column</div></div>
<div class="col3"><div class="wrap">Right column</div></div>
<div class="col2">Center column</div>
</div>
<div class="footer">Footer</div>
</div>
</body>
</html>比我更需要在頭添加自定義文本，所以我決定用div來做。
我在div中包含了2個左邊的圖片，使其浮動：left和新的文本div塊與浮動：右。父塊的Clearfix。但出了問題，clearfix不工作如我所料：
http://codepen.io/cove3010/pen/wMbmQR
/* 1) CSS reset http://meyerweb.com/eric/tools/css/reset/ */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
\t margin: 0;
\t padding: 0;
\t border: 0;
\t font-size: 100%;
\t font: inherit;
\t vertical-align: baseline;
}
/* 2) Skeleton */
.header{
\t height:149px;
\t background: transparent url("http://www.hromov.net/templates/hromov_main/images/right_top.jpg")
\t no-repeat;
\t background-position: top right;
}
.main_cont_width {width:1003px; margin:0 auto;}
.footer {background: #D5BAE4;}
.layout { overflow: hidden;}
.col1 { background: #C7E3E4; float: left; width: 200px; }
.col2 { background: #E0D2C7; margin: 0 200px 0 200px; /* Отступ справа и слева */}
.col3 { background: #ECD5DE; width: 200px; float: right; }
/* 3) Header */
.f_l {
\t float:left;
\t
}
.f_r {
\t background-color:gold;
\t position:relative;
\t top:50px;
right:50px;
\t float:right;
}
/*4) Float divs clearfix*/
.clearfix:before,
.clearfix:after {
content: ""; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div class="main_cont_width">
<div class="header clearfix">
<div class="f_l"><img src="http://www.hromov.net/templates/hromov_main/images/guitar_top.jpg"><img src="http://www.hromov.net/templates/hromov_main/images/cassete_top.jpg"></div>
<div class="f_r">Here goes some text<br>and some more</div>
</div>
<div class="layout">
<div class="col1"><div class="wrap">Left column</div></div>
<div class="col3"><div class="wrap">Right column</div></div>
<div class="col2">Center column</div>
</div>
<div class="footer">Footer</div>
</div>
</body>
</html>那麼，我究竟做錯了什麼？
.layout {width：100％}會產生預期的效果。 – Joseph
約瑟夫，不是那麼正常。在遵循你的建議後，我在FF中的標題和佈局之間填充。對於我來說沒有填充是非常重要的，因爲我需要在標題下方附加背景。 – Cove