Question

我有这个简单的布局css，提供3行布局 css代码

<style type="text/css">  
body {
width:750px;
margin:0 auto;
margin-top:30px;
}



/* ----- HEADER ----- */



#header {
width:750px;
height:150px;
background-color:#333333;
}



/* ----- MAIN CONTENT ----- */



#content { 
width:750px;
background-color:#333333;
margin-top:10px;
min-height:500px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:500px; /* for IE5.x and IE6 */
}



/* ----- FOOTER ----- */



#footer { 
width:750px;
height:100px;
background-color:#333333;
margin-top:10px;
}
</style>

这里是html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>example page</title> 
</head> 
<body> 
<div id="header"> 
    </div> 
<div id="content"> 
    </div> 
<div id="footer"> 
    </div> 
</body> 
</html>

我需要做的是，在标题div中创建的每个div必须具有浮动到左侧格式

<div id="header"><div>welcome</div></div>

这个例如这个div欢迎必须有浮动左格式而不传递任何类或id

Answer 1

要直接回答您的问题，您可以：

#header div { float: left; }

但为什么呢？你能不用span而不是div？如果你不需要id或class标签，为什么要有任何标签呢？

Answer 2

你需要的只是“清理”你的div。当您浮动元素时，它的容器将不再延伸以适合子元素。阅读关于清算的这个伟大的article。我修改了你的代码，只需在标题中的欢迎div之后添加一个清除div。

<div id="header"> 
    <div> Welcome dude!</div>
    <div class="clear"></div>
</div>

清除div的CSS

.clear{clear:both; height:0;}

再看fiddle

sub divs css格式化问题？

2 个答案: