如何解决为什么使用显示内联时我的空div虽然有宽度,但为什么会折叠?
| 当我使用display inline放置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 \'属性
此属性不适用于
不可替换的内联元素。的
未替换内联的内容宽度
元素的盒子是
在其中渲染内容(之前
孩子的任何相对偏移)。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。