Layout Artifact Display:table-cell

align elements on both sides

The first case is to align the two elements to the left and right, and if it is in the past, I will definitely use float to do so, but in fact it can be done with table:

* {    box-sizing:border-box;}. Content {    display:table;    border:1px solid #06c;    padding:15px 5px;    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}

　

<div class= "Content" >    <div class= "left" >        <div class= "box" >B</div>    </div >    <div class= "right" >        <div class= "box" >A</div>    </div></div>

　　

Automatically divides each small module into a single line that displays

In the second case, let's take a look at the diagram:

The above layout is usually done with float, or each Li is set to Display:inline-block, and all of them are set to a width, and the most painful is 5 li if you set width:20%; they will fall. If Li is set to Display:table-cell, this is not the case, even if you do not set the width they will be displayed on a line, you are in the Gator line he will not fall, will still show in the same.

* {    box-sizing:border-box;}. Content {    display:table;    border:1px solid #06c;    padding:15px 5px;    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;}

　　

<div class= "Content" >    <ul>        <li>1</li>        <li>2</li>        <li >3</li>        <li>4</li>        <li>5</li>    </ul></div>

　　

The image is centered vertically on the element

<div class= "Content" >    <div class= "Img-box" >             </div></div>

　　

* {    box-sizing:border-box;}. Content {    display:table;    border:1px solid #06c;    padding:15px 5px;    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;}

　　

Two box implementations for equal height alignment

The height of the box on the left side of the box always follows the height of the right box to change

<div class= "Content" >    <div class= "Img-box" >             </div>     <div class= "Text-box" >        <span> Wang Nima and Chen Nima are young and youthful, one day they met, and then found that the other side at first sight, so happy to live together .... Wang Nima and Chen Nima are young and youthful, one day they met, and then found that the other side at first sight, so happy to live together .... Wang Nima and Chen Nima are young and youthful, one day they met, and then found that the other side at first sight, so happy to live together .... Wang Nima and Chen Nima are young and youthful, one day they met, and then found that the other side at first sight, so happy to live together .... Wang Nima and Chen Nima are young and youthful, one day they met, and then found that the other side at first sight, so happy to live together .... Wang Nima and Chen Nima are young and youthful, one day they met, and then found that the other side at first sight, so happy to live together .... </span>    </div></div>

　　

* {    box-sizing:border-box;}. Content {    display:table;    border:1px solid #06c;    padding:15px 5px;    max-width:1000px;    margin:10px Auto;    min-width:320px;    width:100%;}. img-box{    width:100px;    border:1px solid red;    Display:table-cell;    Vertical-align:middle;    Text-align:center;    Background-color: #4679bd;}. text-box{    margin-left:20px;    border:1px solid #ddd;    padding:10px;}

　　

The above case does not set the Display:table-cell on the right side of the box, only the left side, so the left side follows the right height changes.

If you want to implement whichever height of the two box is changed and the other one follows, just set the box on the right to Display:table-cell.

Resilient, responsive layouts

<div class= "Content" >        <div class= "Left-box" >                      </div>                <div class= "Right-box" >            <span> Wang Nima and Chen Nima are young and youthful, one day they met, and then found that the other side at first sight, so happy to live together .... Wang Nima and Chen Nima are young and youthful, one day they met, and then found that the other side at first sight, so happy to live together .... Wang Nima and Chen Nima are young and youthful, one day they met, and then found that the other side at first sight, so happy to live together .... Wang Nima and Chen Nima are young and youthful, one day they met, and then found that the other side at first sight, so happy to live together .... Wang Nima and Chen Nima are young and youthful, one day they met, and then found that the other side at first sight, so happy to live together .... Wang Nima and Chen Nima are young and youthful, one day they met, and then found that the other side at first sight, so happy to live together .... Wang Nima and Chen Nima are young and youthful, one day they met, and then found that the other side at first sight, so happy to live together .... Wang Nima and Chen Nima are young and youthful, one day they met, and then found that the other side at first sight, so happy to live together .... Wang Nima and Chen Nima are young and youthful, one day they met, and then found that the other side at first sight, so happy to live together .... Wang Nima and Chen Nima are young and youthful, one day they met, and then found that the other side at first sight, so happy to live together .... Wang Nima and Chen Nima are young and youthful, one day they met, and then found that the other side at first sight, so happy to live together .... </span>        </div>    </div>

　　

* {    box-sizing:border-box;}. Content {    display:table;    border:1px solid #06c;    padding:15px 5px;    max-width:1000px;    margin:10px Auto;    min-width:320px;    width:100%;}. Left-box {    float:left;    margin-right:10px;    padding-top:5px;}. Right-box {    Display:table-cell;    padding:10px;    border:1px solid #ccc;    margin-right:10px;    Vertical-align:top;}

　　

Mobile layout Because there are display:box such attributes, so the Table-cell relative is not a big use, but on the mobile side you want to use Table-cell is not not, according to their own understanding of the property to be used on it.

　　

Layout Artifact Display:table-cell