0

我发现将display包含块的属性设置为并将table后代块框包含在display属性设置为table-cell和vertical-align属性设置为的框中的效果与将这些框的属性设置为top的效果相同。floatleft

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>simulating float</title>
<style type="text/css">

#container {
background-color: darkgrey;
margin: 10px;
padding: 10px;
height: 240px;
display: table;
}

.box {
margin: 5px;
width: 240px;
height: 240px;
background-color: grey;
}

.float {
display: table-cell;
vertical-align: top;
}

</style>
</head>
<body>

<div id="container">

<div class="float">
<div class="box"></div>
</div>

<div class="float">
<div class="box"></div>
</div>

<div class="float">
<div class="box"></div>
</div>

</div>
</body>
</html>

有人可以给我一个解释吗？谢谢。

4

1 回答 1

0

float CSS 属性指定一个元素应该从正常流中取出并放置在其容器的左侧或右侧，文本和内联元素将环绕它。

此外，display:table-cell使元素的行为类似于 HTML 标记。适当地使元素与整行的vertical-align:top顶部对齐或将单元格的顶部填充边缘与行的顶部对齐。所以

.float { display: table-cell; vertical-align: top; }

看起来好像float:left只有。

我希望这能帮助你更好地理解 CSS。

于 2013-09-21T19:25:10.590 回答