Why does my empty div collapse although it has a width when display inline is used?
WHen I use display inline to place div#hlogo,div#hdesign and div#hTestimonial, the div collapse although I 've set a width on them..
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:开发者_StackOverflow中文版 #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;}
Because that's what the spec says to do.
Content width: the 'width' property
This property does not apply to non-replaced inline elements. The content width of a non-replaced inline element's boxes is that of the rendered content within them (before any relative offset of children).
加载中,请稍侯......
精彩评论