兩人在CSS等於列

可能重複：
CSS - Equal Height Columns?兩人在CSS等於列

似乎是在網絡上的文章很多，但很多都沒有更新，如果有我無法理解真的是在CSS中構建2個相等列的最佳方式（不知道哪一個是最長的）。

例子：

alt text

我想實現的是，B柱將一路STRETCH時到A列的大小另外，如果B列將長於A列，然後我要列A一路STRETCH時到B列的大小

感謝

喬爾

來源

2010-10-14 Joel

也http://stackoverflow.com/questions/1077171/equal-height-columns-w-footer-using-css，http://stackoverflow.com/questions/1780325/both-columns-相同高度的最深的列和http://stackoverflow.com/questions/3860337/trying-to-get-equal-height-columns-but-div-after-the-columns-does-not-work – 2010-10-14 19:05:42

這應該工作，香港專業教育學院分離所需的具體樣式，並在可能的情況下進行評論。

希望它有幫助。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Equal 2cols</title> 

<style type="text/css"> 
    /*common styles*/ 
     html, body, h1, h2, h3{margin:0; padding:0;} 
     .clearme{clear:both;} 

    /*generic layout styles*/ 
     #container{width:960px; margin:0 auto;} 
     #header{width:960px; height:100px; background-color:#999; margin:0 0 10px 0;} 
     #footer{width:960px; height:100px; background-color:#999; margin:10px 0 0 0;} 

    /*equal height specific styles*/ 
     #layout{clear:left; float:left; width:100%; overflow:hidden; background:#f60; /* column 2 background colour */} 
     #content{float:left; width:100%; position:relative; right:50%; background:#f00; /* column 1 background colour */} 
     #col1 {float:left; width:46%; position:relative; left:52%; overflow:hidden;} 
     #col2 {float:left; width:46%; position:relative; left:56%; overflow:hidden;} 
</style> 

</head> 

<body> 
    <div id="container"> 
     <div id="header"> 
      <h1>header</h1> 
     </div><!--/#header--> 

     <div id="layout"> 

      <div id="content"> 
       <div id="col1"> 
        <h2>A</h2> 
       </div><!--/#col1--> 

       <div id="col2"> 
        <h2>B</h2> 
        <p>As long as you like</p> 
       </div><!--/#col2--> 

      </div><!--/#content--> 
     </div><!--/#layout--> 

     <div class="clearme"></div> 

     <div id="footer"> 
       <h3>Footer</h3> 
     </div><!--/#footer--> 

    </div><!--/#container--> 
</body> 
</html>

來源

2010-10-15 10:13:32

兩人在CSS等於列

回答

相關問題