Tip: You can modify some of the code before running
<! 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=utf-8 "/> <title> two column width adaptive </title> <style type=" Text/css "> con{width:80%; margin:0 Auto 10px; border-bottom:2px dashed #333; padding-bottom:10px;} . left,.right{height:200px border:1px solid #333 background: #eee; left{width:160px; Background:url (yun_qi_img/logo.gif) No-repeat Center Center; . warp{width:100% background: #fc3;} /* Left float, right margin-left,ie6,7 down to a certain extent to the right will sink, and there is a IE6 3px bug*/. Con1 left{float:left; Con1 right{; Word-break:break-all; _margin-left:167px; /*ie6 3px bug*/}/* Left absolute positioning, right margin-left, this method effectively avoids the right sinking and IE6 3px bug*/con2{. Position:relative con2 Olute; left:0; top:0;} . con2. right{margin-left:170px; /* There is also a way online, may not determine the width of the left, using that haslayout principle, is not very clear, but the width of the left does not calculate the border width, in the non-FF browser width in the past hour will appear right down, and the same IE6 3px bug*/. Con3 left{Float:left; margin-right:8px; _margin-right:5px; /*ie6 3px bug*/}. Con3 right{overflow:hidden; word-break:break-all;} </style> </pead> <body> <p& gt; Two-column width adaptive test </p> <div id= "Con1" class= "Con con1" title= "left float, right margin-left,ie6,7 down to a certain extent to the right will sink" > < The div class= "left" > Floats to the right, margin-left,ie6,7 down to a certain extent to the right, and there is a IE6 3px bug</div> <div class= "right-hand" > Right <div class= "warp" > Test child elements can use width:100%</div> </div> </div> <div id= "Con2" Con con2 "title=" left absolute positioning, right margin-left, this method effectively avoids the right sinking and IE6 3px bug "> <div class=" left ">" absolute positioning, right margin-left, This method effectively avoids the right sinking and the IE6 3px bug</div> <div class= the >right <div "class=" > Test child elements can use warp lt;/div> </div> </div> <div id= "Con3" class= "Con con3" title= "There is also a method on the web, which may not have to determine the width of the left, use that haslayout Yes, not quite clear, but the width of the left side does not calculate the width of the border,In non-FF browsers, the width in the browser will appear right down, and there will also be a IE6 3px bug "> <div class=" Left "> There is also a method on the Internet, you may not have to determine the width of the left-hand side, using the haslayout principle, not very clear, However, the width of the left side does not calculate the border width, the width in the non-FF browser will appear to the right sink in an hour, and there will also be a IE6 3px bug</div> <div class= "right-hand" >right <div "class=" Warp "> Test child elements can be used width:100%</div> </div> </div> </body> </ptml> </td> </tr > </table>
Tip: You can modify some of the code before running
