Question

我遇到了以下问题。考虑这个html代码示例：

<html>
<body>
<div id="leftColumn">
  <div id="div1"></div>
  <div id="div2"></div>
  <div id="div3"></div>
  <div id="div4"></div>
</div>
<div id="rightColumn">
  <div id="div1sidebar"></div>
  <div id="div2sidebar"></div>
  <div id="div3sidebar"></div>
  <div id="div4sidebar"></div>
</div>     
</body>
</html>

现在 - 左栏中div的高度会有所不同，具体取决于其中的内容。我希望右列中的div与左列中的div具有相同的高度 - 所以＆＃34; div1sidebar＆＃34;的高度取决于＆＃34; div1＆＃34;，＆＃34; div2sidebar＆＃34;取决于＆＃34; div2＆＃34;等

有没有办法用css实现它？或者以jQuery为例？＆＃34; Faux columns＆＃34;方法（http://www.alistapart.com/articles/fauxcolumns/）不是一个选项，因为它不是关于父母背景，而是div本身的高度。

编辑：有一件事 - 左栏中div的高度改变＆＃34;在飞行中＃34;没有重新加载网站。

Answer 1

你可以左右float你的元素，并使用重复的clear: both让它们对齐，就像这里：http://jsfiddle.net/eNRhQ/2/

这可确保相应的div始终对齐，但正如您可以通过边框看到的那样，它们的高度实际上并不相同。（你可能只需要这个用于造型目的......）

如果你真的想以编程方式对齐你的div，你可以在jQuery中这样做：

var left = $('#left-element');
var right = $('#right-element');

var maxHeight = Math.max(left.height(), right.height());

left.height(maxHeight);
right.height(maxHeight);

但我会确保页面看起来没有任何Javascript

Answer 2

这是CSS中无法完成的奇怪事情之一。

我使用此插件，效果很好，http://www.cssnewbie.com/equalheights-jquery-plugin/

如果您希望在调整大小后保持最新状态，则可以执行以下操作：

$(".columns").resize(function(){
  $(".columns").equalHeights();
});

http://api.jquery.com/resize/

HTML，CSS，jQuery - 一列中div的高度取决于另一列中div的高度

2 个答案: