Table-cell layout

The Table-cell can be used to achieve a wide adaptive layout.

Table-cell has some useful properties, such as vertical center, adaptive height width, etc., after setting the Table-cell layout for elements, the margin of the element is invalid, padding is effective,

And once the element is set to float or absolute, the Table-cell will also fail.

Table-cell incompatible ie6,7. However, you can achieve the approximate effect by triggering the haslayout.

The following can be used to achieve a wide adaptive layout:

　　

<Divclass= "wrapper">        <imgsrc=".. /.. /img/1.jpg "width= "Max">        <spanclass= ". Table-cell">Quote: Recently in the teaching of Web front-end development of HTML and CSS basic knowledge, students to face the "form" production. I like to call the "form" the "nightmare" of the person who first entered the front. I have to say, the form of this thing in the front-end development, the problem is quite a lot, from nesting rules, writing habits, to browser compatibility issues, there are many areas to be aware of. Summarize here to facilitate development. </span> </Div>. Wrapper{background: #FFCCCC; overflow:hidden;zoom:1;min-width:400px;}        Img{float:left;}            . table-cell{Display:table-cell;            *display:inline-block;        width:3000px; }    

Table-cell layout