0

display包含ブロックのプロパティを に設定し、プロパティが に設定され、プロパティが に設定さtableれたボックスで子孫ブロック ボックスを囲むと、これらのボックスのプロパティが に設定されている場合と同じ効果があることがわかりました。displaytable-cellvertical-aligntopfloatleft

<!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

CSS の float プロパティは、通常のフローから要素を取得し、そのコンテナの左側または右側に沿って配置する必要があることを指定します。このコンテナでは、テキストとインライン要素が周囲を囲みます。

また、display:table-cell要素を HTML タグのように動作させます。妥当性により、要素が行全体のvertical-align:top上部に揃えられるか、セルの上部パディング エッジが行の上部に揃えられます。だから、

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

だけの場合のように見えますfloat:left。

CSSの理解を深める一助になれば幸いです。

于 2013-09-21T19:25:10.590 に答える