当我使用显示内联来放置div#hlogo,div#hdesign和div #hTestimonial时,div崩溃虽然我已经设置了它们的宽度..
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=utf-8" />
<title>Slicing</title>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="hlogo">
<div class="Hlogo">
<div id="Logoheader">RamblingSoul</div>
<div id="Logodesc">
<p> A Free CSS Template From </p>
<p>RamblingSoul</p>
</div>
</div>
</div>
<div id="hdesign">
</div>
<div id="hTestimonial">
</div>
</div>
<div id="body">
</div>
<div id="footer">
</div>
</div>
</body>
CSS:
html,body{
margin:0px;
padding:0px;
width:100%;
height:100%;
}
div#wrapper{
margin:0px;
padding:0px;
width:100%;
height:100%;
line-height:normal;
border: #060 thick groove;
background-color:#FF3;
font-size:10px;
line-height:1.5px;
}
div#wrapper div#header{
width:100%;
height:30%;
border:#F00 medium double;
}
div#wrapper div#body{
width:100%;
height:50%;
border:#F00 medium double;
}
div#wrapper div#footer{
width:100%;
height:20.0%;
border:#F00 medium double;
}
div#wrapper div#header div#hlogo{
width:30%;
height:100%;
border:#F00 medium double;
//float:left;
margin:0px ;
}
div#wrapper div#header div#hdesign{
width:100%;
height:100%;
border:#F00 medium double;
//float:left;
margin:0px 250px;
}
div#wrapper div#header div#hTestimonial{
//width:40%;
width:30%;
height:100%;
border:#F00 medium double;
float:right;
}
div#wrapper div#header div#hlogo,div#wrapper div#header div#hdesign,div#wrapper div#header div#hTestimonial{display:inline;}
因为这就是规范所要做的.
内容宽度:'width'属性
此属性不适用于未替换的内联元素.未替换的内联元素框的内容宽度是其中的呈现内容的内容宽度(在子项的任何相对偏移之前).