Question

我有3列布局，一切正常： http://codepen.io/cove3010/pen/dGEmaZ

＆＃13;

/* 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 {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* 2) Skeleton */
.header{
	height:149px; 
	background: transparent url("http://www.hromov.net/templates/hromov_main/images/right_top.jpg") 
	no-repeat; 
	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 {
	float:left;
	
}
.f_r {
	background-color:gold;
	position:relative;
	top:50px;
  right:50px;
	float:right;
}

/*4) Float divs clearfix*/
.clearfix:before,
.clearfix:after {
    content: ""; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

＆＃13;

<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>

＆＃13;

我需要在标题中添加自定义文本，所以我决定使用div 我在div中包含2张左图片以使其浮动：左侧和新文本div块与浮动：右侧。父块的Clearfix。但出了点问题，clearfix并没有像我预期的那样工作：

http://codepen.io/cove3010/pen/wMbmQR

＆＃13;

/* 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 {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* 2) Skeleton */
.header{
	height:149px; 
	background: transparent url("http://www.hromov.net/templates/hromov_main/images/right_top.jpg") 
	no-repeat; 
	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 {
	float:left;
	
}
.f_r {
	background-color:gold;
	position:relative;
	top:50px;
  right:50px;
	float:right;
}

/*4) Float divs clearfix*/
.clearfix:before,
.clearfix:after {
    content: ""; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

＆＃13;

<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>

＆＃13;

那么，我做错了什么？

Answer 1

添加位置：相对于.header：

＆＃13;

.header{
	height:149px; 
	background: transparent url("http://www.hromov.net/templates/hromov_main/images/right_top.jpg") 
	no-repeat; 
	background-position: top right;
        position: relative;
}

＆＃13;

从.f_l＆amp;中删除两个浮点数。 f_r并将.f_r位置更改为绝对值：

＆＃13;

.f_r {
	background-color:gold;
	position: absolute;
	top:50px;
        right:50px;
}

＆＃13;

这会将文本定位在您需要的地方，根本不需要花车。

文本标题块浮动在3列布局标题中的div中

1 个答案: