Две равные колонки в CSS

Можно создать дубликат:
CSS - Equal Height Columns?Две равные колонки в CSS

Там, кажется, много статей в Интернете, но многие из них не обновляются, и я не могу понять, если есть действительно лучший способ построить 2 равных столбца в CSS (не зная, какой из них будет самым длинным).

Пример:

alt text

То, что я хочу, чтобы добиться того, что столбец B будет растяжения вплоть до размера столбца A. Кроме того, если столбец B будет больше, чем колонке А, то я хотите столбец А растяжения вплоть до размера столбца B.

Благодаря

Joel

источник

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 –

Это должно работать, ив разделяли конкретные стили, необходимые, и прокомментировали, где это возможно.

Надеюсь, это поможет.

<!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

ответ

Смежные вопросы