CSS in-depth study: Display of the Horror Story decryption (2)-Table-cell

Last episode "CSS in-depth study: Display of the horror of the Story of decryption (1)-Display-inline" has pulled the list of properties of display to sneak out, found in this property horror is actually a fragile disguise. In addition to some of the commonly used properties, the others are legendary brother. Since it is legend brother, please do not infatuation. Let the legend continue to legend. This time we'll take care of the Table-cell. (TABLE-CELL:IE6, 7 not supported)

Table-cell this guy in the foreign website occasionally has the outcrop, celestial because IE6, 7 these two goods overrun, difficult to play, then, this guy what can do? Let's look at table below, why is the table layout that used to be so brilliant in those years? What are the characteristics of her? Discard table compatibility, SEO, loading and so on, not related to this article, just look at the attributes, then two features:

1. Peers and other high.

2. Automatic width adjustment.

So does Table-cell have this trait? The answer is yes, why? There is an interesting rule in CSS for "creating anonymous table elements." Take Table-cell to pull, that is, when an element is set to Display:table-cell, if her parent node is not Display:table-row, Grandpa node is not display:table, then the following is the time to witness miracles, The son gave birth to his father and grandfather (the browser will automatically create two anonymous box objects) although you can not find your father and grandfather, but this really happened, it is really incredible things, where incredible, without applause the most incredible. ^_^

So here are a few things to look at and help us understand this incredible thing. Let me write the following code:

<style type= "Text/css" >    div{padding:10px 0;}    . CLASSTD,    td{height:34px; padding:10px; margin:10px; border:1px solid #ccc; vertical-align:middle;}    . Classtd{display:table-cell; Border-color: #cc0;} </style><div class= "CLASSTD" >tom</div><div class= "classtd" >jack</div><div> normal Div</div><div class= "CLASSTD" >angel</div><div>======= above is div below is table ========</div> <table cellpadding= "0" cellspacing= "0" >    <tr>        <td class= "DTC" >tom</td>        <TD Class= "DTC" >jack</td>    </tr></table><table style= "margin-top:10px;" cellpadding= "0" cellspacing= "0" >    <tr>        <td>angel</td>    </tr></table>

Then I predict that the browser appears as follows:

Well, I admit I looked at the effect first, and then I could conclude: Tom and Jack had a father and a grandfather (the browser creates a table to wrap the adjacent Display:table-cell elements) and behaves the same as the first table. Angel himself gave birth to the father and grandfather performed the same as the second table.

Since this is the case, then want to understand Table-cell, is disguised to understand the form of TD. Then back to the previous two features: Peer high, width automatic adjustment.

Since this is the case, then we can take the goods for the high-level layout :

<style type= "Text/css" >    . classtd{padding:10px; margin:10px; border:1px solid #ccc; vertical-align:top;}    . Classtd{display:table-cell; Border-color: #cc0;} </style><div class= "CLASSTD" >    <p> Adult. <br/> Actually I think we don't ask Yuan Fang, Yuan Fang is not God-man, <br/> will not martial arts, maybe a retarded, <br/> I don't believe I am here Heihuanfang <br/> He will suddenly feiyanzoubi come to me <br/ > Press my head on the keyboard to yu7jhklhgjkfgt;/. Yujh bnujm798u7jrtb5 tq1qwsewrt5    </p></div><div class= "classtd" ><p> me and left high </p> </div>

Get this stuff together with the vertical-align:middle. You can make a vertical center layout (with multiple lines of text centered vertically) of an element that is not fixed in size :

<style type= "Text/css" >    . classtd{display:table-cell; padding:10px;margin:10px;border:1px solid #ccc;}    . CLASSTD div{display:inline-block; vertical-align:middle;} </style><div class= "CLASSTD" >    <div style= "padding:40px 80px 10px 10px; background: #639146; color:# FFF; " >div+css</div>    <div style= "padding:60px 80px 10px 10px background: #2B82EE; color: #fff;" >javascript</div>    <div style= "padding:70px 80px 10px 10px background: #F57900; color: #fff;" >HTML5</div>    <div style= "padding:80px 80px 10px 10px background: #BC1D49; color: #fff;" >CSS3</div></div>

Using the column width to automatically adjust this feature can be left fixed right adaptive layout :

<style type= "Text/css" >. left{float:left; width:260px; padding:10px; margin-right:10px; border:1px    Solid # CCC;}    . classtd{Display:table-cell; width:3000px; padding:10px; border:1px solid #ccc;} </style><div class= "Left" > I am </div><div class= "CLASSTD" > I am the adaptive    right </div>

Having children's shoes may confuse the width:3000px in this layout. So here's how this layout works.

The Display:table-cell element generates the anonymous table default Table-layout:auto. The width is automatically adjusted based on the contents of the cell. So the purpose of setting width:3000px is as wide as possible meaning. This allows for an adaptive effect to be achieved.

Storm Spirits said: "Any horror of appearance can not hide the simple essence." "(OK is my dog blood ^_^) Originally this goods on this material, as for the other applications of Display:table-cell, such as multi-line text center, and the above application compatibility considerations. You can stretch your little powder fist or sandbags as big as the fist, tapping the keyboard, yards a yard. Understand the principle that everything is so easy, isn't it? ^_^

Finally, the ability is limited, brother I can only help you here, if it is helpful to you, please click [Recommended]or[top].

CSS in-depth study: Display of the Horror Story decryption (2)-Table-cell