display:table-cell
There are many problems when using float to do layout triggers. For example, if you want to clear the float, the element will be out of the document flow after floating. Even if you clear the float, the element will still be out of the document flow.
If the left and right layouts can be used display:inline-block;, I will use it for layout, but I still can't completely avoid using it. Many layouts, such as layout scenarios that need to be left and right, have no way not to use float for layout.
Justify elements
The first case is to align two elements to the left and right respectively. If it was the past, I would definitely use float to achieve it, but it can be done with a practical table:
<!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>Automatically divide each small module evenly so that it can be displayed in one row
In the second case, let's look at the picture first:
When encountering the above layout, it is generally floatused for making, or setting each one lito do it , and setting a width for them, and the most painful thing is that if you set display:inline-block;them, 5 of them will definitely fall down. If you set them all This will not happen if you set the achievement . Even if you don’t set the width, they will be displayed in one line. If you add more lines, they will not fall down, and they will still be displayed in the same way.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>The image is vertically centered on the element
Sometimes we need to center the image vertically and horizontally on a certain element. It is more complicated to use conventional writing, but it is relatively simple to use 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>