嵌套的div同样长

Question

<div id = "content">

<div id="column1"> </div>
<div id ="column2"> </div>

</div>

我有一个问题，我希望column1和column2是内容div的大小（因此每列与最大列一样长）。但我尝试将每列的高度设置为自动或100％，希望它占用空间，但两者仍然采用自己的大小。

我该怎么做？ （不能只使用表格css）

在此示例中，第1列需要变长（只要第2列）

Answer 1

不幸的是，你不能只使用CSS，除非你只是手动将div的高度设置为500px或者其他东西，但当然这是不切实际的。

使用jQuery解决方案非常简单，这个教程可以帮助您轻松设置它：http://www.cssnewbie.com/equal-height-columns-with-jquery/

编辑：如果你真的想用CSS做这件事，你以前看过Faux-Columns吗？ A List Apart文章很好地解释了它们：http://www.alistapart.com/articles/fauxcolumns/

Answer 2

嗯，这取决于你的目的。我猜这是一个背景问题，在这种情况下，可以使用“人造列”轻松解决这个问题。

在此处详细了解：http://line25.com/articles/create-sidebars-of-equal-height-with-faux-columns

Answer 3

当然，下面的内容就足够了。

<style>
  #content{
      height:100%;
      width:100%;
  }
  #column1,#column2{
      display:inline;
      float:left;
      height:100%;
  }
  #column1{
      width:25%;
  }
  #column2{
      width:75%;
  }
</style>


<div id="content">
    <div id="column1"> column 1 </div>
    <div id="column2"> column 2</div>
</div>