Layout Like table Divⅰ
The following is my translation of the content, is based on my understanding of the article to paraphrase, you do not choose where to translate the wrong, my purpose is to convey this CSS skills
The problem with the previous article is that the model for IE is equivalent to garbage, so the basic can only be done to play, there is no practical use, now I have to do is,
So that it can be better displayed in IE, so I did a second model
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "><ptml xmlns=" http://www.w3.org/1999/xhtml "><pead><meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title>equal Height boxes with CSS, part II </title> <style type=" text/css "Media=" SC Reen,print ">/* Layout rules */equal {display:table; Border-collapse:separate; }. row {display:table-row; row div {Display:table-cell;} /* Styling rules to make the example look nicer * * Html,body {margin:0; padding:0; Color: #000; Background: #fff; Body {font:76%/140% "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-serif; equal {margin:10px auto ; border-spacing:10px; Background: #898B60; width:600px; Row div {background: #fff;. row. One {width:200px}. Row. Two {width:200px}. Row. Three {Vertical-align:mid dle; } row div H2 {margin:0 0 0.5em 0; Padding:0.5em 10px; Font-size:1.2em; Color: #fff; Background: #595B30; }. Row div p {font-size:0.94em; Margin:0.5em 0; padding:0 10px; } #labfooter {text-align:center; Clear:both; } </style><!--Some rules to make Ie/win display the boxes with variable height. --><!--[If ie]> <style type= "Text/css" media= "All" >.equal,. row {display:block;}. row {padding:10px;}. Row div {display:block; float:left; margin:0;}. Row. Two {margin-left:10px}. Row. three {width:160px; float:right}. ieclearer {float:none; clear:both; height:0; padding:0; font-size:2px; line-height:0;} </style><! [Endif]--></pead><body><div class= "equal" > <div class= "Row" > <div class= "one" > < H2>this is a box</p> this container contains less content, but he can and more content of the container, such as high </div> <div class= "two" > <p>thi S is another box</p> <p> this box contains more content than another one. If all the easy to display as a cell, then its height will be all the easy height. It now wants to show the same as the table, but he is not a form .</p> <p> also, display:table, the Display:table-row and Display:table-cell div shows the same effect as a table, but the bad thing is that he can't run it on your familiar browser ie, but it can run smoothly like Mozilla, Opera, Safari, Firefox, OmniWeb, Camino, and Netscape. These browsers. Then IE gets the CSS to choose from, and the rules prevent it from completely destroying this layout. </p> <p> Learn more details: <a href= "http://www.jluvip.com/blog/article.asp?id=149" >equal Height boxes with CSS </a>.</p> </div> <div class= "Three" > <p> this is also a container with less content. And the content is centered vertically in the </p> </div > <!--[if ie]> <div class= "Ieclearer" ></div> <! [endif]--> </div></div><div id= "Labfooter" > <a href= "http://www.jluvip.com" >my blog</ a> | This translation of the page copyright GREENGNN All, reproduced please indicate the source </div></body></ptml>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]
XHTML structure similar to the first model just adds a new div to IE
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "><ptml xmlns=" http://www.w3.org/1999/xhtml "><pead><meta http-equiv=" Content-type "content=" text/html; charset=gb2312 '/> <title>equal height boxes with CSS </title> <style type= ' text/css ' media= ' screen, print ">/* Layout rules */. Equal {display:table; Border-collapse:separate; }. row {display:table-row; row div {Display:table-cell;} /* Styling rules to make the example look nicer * * Html,body {margin:0; padding:0; Color: #000; Background: #fff; Body {font:90%/140% "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-serif; equal {margin:10px auto ; border-spacing:10px; Background: #898B60; width:80%; Row div {background: #fff; row Div.one {width:40%}. Row Div.two {width:40%}. Row Div.three {Vertical-alig N:middle; } row div H2 {margin:0 0 0.5em 0; Padding:0.5em 10px; Font-size:1.2em; Color: #fff; Background: #595B30; }. Row div p {font-size:0.94em; Margin:0.5em 0; padding:0 10px; } #labfooter {Text-align:center} </style></pead><body><div class= "equal" > <div class= " Row "> <div class=" One "> <p>this is a box</p> <p> this container contains less content, but he can and more content of the container and so high </p> </div> <div class= "Two" > <p>this is another box</p> <p> this box contains more content than the other one. If all the easy to display as a cell, then its height will be all the easy height. It now wants to show the same as the table, but he is not a table .</p> <p> also, display:table, Display:table-row and Display:table-cell The div shows the same effect as a table, but the bad thing is that he can't run it on your familiar browser ie, but it can run smoothly in Mozilla, Opera, Safari, Firefox, OmniWeb, Camino, and Netscape. These browsers above </p> <p> Learn more details: <a href= "http://www.jluvip.com/blog/article.asp?id=149" >equal Height boxes with css</a>.</p> </div> <div class= "Three" > <p> this is also a container containing less content. And the content is centered vertically. </p> </div> </div></div><div id= "Labfooter" > <a href= "http://www.jluvip.com" >my blog</a> | This translation of the page copyright GREENGNN All, reproduced please indicate the source </div></body></ptml>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]
<div class= "equal" >
<div class= "Row" >
<div class= "One" ></div>
<div class= "Two" ></div>
<div class= "three" ></div>
<!--[If ie]>
<div class= "Ieclearer" ></div>
<! [endif]-->
</div>
</div>
Add a judgment to XHTML, judge whether IE, then give IE a special treatment, in IE display and other browsers different code, for this judgment Ie\mac preferred to display the content.
And then add a judgment in the CSS, with XHTML, floating alignment (floating alignment is not necessary to explain) the way to achieve the high side of the container, but still can not be true to achieve high, you can add background color visual illusion to achieve high visual, or other methods, There is no explanation here. Here is the code in the CSS
<!--[If ie]>
<style type= "Text/css" media= "All" >
. Equal,. Row {
Display:block;
}
. Row {
padding:10px;
}
. Row Div {
Display:block;
Float:left;
margin:0;
}
. Row. Two {
margin-left:10px;
}
. Row. Three {
width:160px;
Float:right;
}
. ieclearer {
Float:none;
Clear:both;
height:0;
padding:0;
font-size:2px;
line-height:0;
}
</style>
<! [endif]-->
To this end, the whole design is really completed, although not perfect, the effort to non ie is a bit superfluous, now either IE support the first model, or we may come up with a better solution. But this attempt is valuable.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
