CSS Table-cell Property Implementation of the left-hand image of the layout Method Example Introduction

In some cases, using Table-cell is simpler and more efficient than float, such as horizontal menu style writing, here we take a look at the use of CSS Table-cell property to implement the left-hand image of the layout method is detailed:

When the features are arranged horizontally, float, display:inline-block, etc. are generally used. Our use of Table-cell can also be implemented simply,
Using Table-cell to create the benefits of horizontal alignment I think there are three points (hehe, some farfetched)

1.float and Clear:both can be omitted;
2. Vertical centering is also possible;
3. Even if you use border and padding, the frame will not be topped.
Clear:both can be replaced with Display:inline-block, Display:table-cell is mainly centered vertically.
There is also the problem that padding and border do not cause the style to top out the border when in responsive design. It is no longer necessary to calculate the width and use the box-sizing.

Horizontal arrangement of Table-cell production
First introduce the basic wording of Table-cell

example, we make a style that appears in the general Web site on the right side of the image

CSS section:

. box{width:60%; margin:60px auto 0; padding:20px; background: #f5f5f5;}   . Content{display:table-cell; *display:inline-block;}

HTML section:

<p class= "box F9 fix" > <a href= "#prettyGirl" class= "L Mr10" ></a> <p class= "Content" > <p><a href= "#prettyGirl" > Beauty one </a> from Shanghai </p> <p class= "MT5" > Signature: I want to find a crisper to put all the touches you gave me. When you make me sad, take it out and relive it. </p> <p class= "MT5" > Weibo: Sitting in the office, only listen to the rumble of a few loud noises, sunny can also thunder it? The Bazaar coffee shop across the street was blown up to two. This point blasting also too failed, also do not clear the end, the passing of the car shocked to the disgraced, Leng in the middle of the road do not know how to be good. Second, the house only half-blown, the other half standing, is the drug too much water or the quality of the house is too good? </p> </p></p>