我有这个HTML代码:
<body>
<div id="div0" style="display:inline; background-color:green; width:100%">
<div id="div1" style="display:inline; background-color:aqua;width:33%"> </div>
<div id="div2" style="display:inline; background-color:red;width:33%"> </div>
<div id="div3" style="display:inline; background-color:yellow;width:33%"> </div>
</div>
</body>
我想用div1,div2和div3填充页面,但它们不会填满整个宽度.
它发生了什么？
ror*_*ryf 14
取自显示声明:
display: inline表示元素在同一行的当前块内部显示为内联.只有当它在两个块之间时,该元素才会形成一个"匿名块",但它具有尽可能小的宽度.
您不能给出内联元素集的宽度或高度尺寸,它们将被忽略.元素必须具有block要执行此操作的显示类型.display: block然而,设置将无法达到您想要的效果,因为每个元素都将填满整个宽度.float: left将导致它们向左堆叠并且还强制display: block.
<head>
<style type="text/css">
#wrap {
width:100%;
}
#wrap:after {
/* Prevent wrapper from shrinking height,
see http://www.positioniseverything.net/easyclearing.html */
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#wrap .container {
float: left;
width:33%;
}
</style>
</head>
<body>
<div id="wrap">
<div class="container"> </div>
<div class="container"> </div>
<div class="container"> </div>
</div>
</body>
嗯,语义学
有关浮动的进一步评论,请参阅Phunky的回答.
| 归档时间： |
|
| 查看次数： |
75180 次 |
| 最近记录： |