display:table-cell
float を使用してレイアウト トリガーを行う場合、多くの問題があります. たとえば、float をクリアしたい場合、要素はフロート後にドキュメント フローから外れます. float をクリアしても、要素は依然としてドキュメント フローから外れます.書類の流れ。
左右のレイアウトが使えるならdisplay:inline-block;レイアウトに使いますが、それでも完全に使わざるを得ないので、左右が必要なレイアウトのシナリオなど、多くのレイアウトではfloatを使わない手はありません。レイアウト用。
要素を正当化する
最初のケースは、2 つの要素をそれぞれ左と右に配置することです.これが過去だったら、間違いなく float を使用してそれを実現しますが、実用的なテーブルで実行できます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
box-sizing:border-box;
}
.content{
display: table;
border:1px solid #06c;
padding:15px 15px;
max-width: 1000px;
margin:10px auto;
min-width: 320px;
width:100%;
}
.box{
width:100px;
height:100px;
border:1px solid #ccc;
text-align: center;
display: inline-block;
font-size: 40px;
line-height: 100px;
}
.right{
text-align: right;
display: table-cell;
}
.left{
text-align: left;
display: table-cell;
}
</style>
</head>
<body>
<div class="content">
<div class="left">
<div class="box">B</div>
</div>
<div class="right">
<div class="box">A</div>
</div>
</div>
</body>
</html>各小さなモジュールを自動的に均等に分割して、1 行に表示できるようにします
2 番目のケースでは、まず画像を見てみましょう。
上記のレイアウトに出くわした時、一般的には作るか、それぞれに設定して、幅を設定するfloatのに使用されますが、最も痛いのは、それらを設定すると、5つが確実に倒れることです。すべて設定 実績を設定すればこのようなことはありません. 幅を設定しなくても一列で表示されます. さらに線を追加すると倒れずに表示されます.同じ方法。lidisplay:inline-block;liwidth:20%;lidisplay:table-cell；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
box-sizing:border-box;
}
.content{
display: table;
border:1px solid #06c;
padding:15px 15px;
max-width: 1000px;
margin:10px auto;
min-width:320px;
width:100%;
}
.content ul{
display: table;
width:100%;
padding:0;
border-right:1px solid #ccc;
}
.content ul li{
display: table-cell;
border:1px solid #ccc;
text-align: center;
height:100px;
border-right: none;
line-height: 100px;
}
</style>
</head>
<body>
<div class="content">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</body>
</html>画像は要素の垂直方向の中央に配置されます
画像を特定の要素の垂直方向および水平方向の中央に配置する必要がある場合があります. 従来の記述を使用するのはより複雑ですが, table-cell を使用するのは比較的簡単です:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
box-sizing:border-box;
}
.content{
display: table;
border:1px solid #06c;
padding:15px 15px;
max-width: 1000px;
margin:10px auto;
min-width:320px;
width:100%;
}
.img-box{
height:150px;
width:100px;
border:1px solid red;
display: table-cell;
vertical-align: middle;
text-align: center;
background-color: #4679bd;
}
</style>
</head>
<body>
<div class="content">
<div class="img-box">
</div>
</div>
</body>
</html>