Question

这是我的Html，

<div id="wrapper" class='common'>
    <div id="left" class='common'>Menu I Menu II Menu III Menu IV</div>
    <div id="right" class='common'>hello world..hello world..hello world..
      hello world..hello world..hello world..hello world..hello world..hello world..
      hello world..hello world..hello world..hello world..hello world..hello world..
      hello world..hello world..hello world..hello world..hello world..hello world..
      hello world..hello world..hello world..hello world..hello world..hello world..
      hello world..hello world..
    </div>
</div>

这是我的CSS，

#wrapper {
    overflow:hidden;
    padding:3px;
}
#right {
    float:right;
    width:70%;
}
#left {
    float:left;
    width:29%;
}
.common {
    border:solid 1px #000;
}

在这里你可以看到它的demo。

我只是试图使id为div的div可以根据id正确的div的内容进行扩展。我只是试图自己做，但我失败了。任何人都可以通过驱逐一些线索来帮助我..？

Answer 1

最合适的纯css机制是使用display:table*将#left和#right声明为兄弟列。这将导致它们在转换为display:table-cell时显示为相同的高度。唯一需要注意的是，您需要一个包装器div，因为您需要一个看起来像display:table＆gt;的结构。 display:table-row＆gt; display: table-cell。

我在这里添加了一个jsfiddle：http://jsfiddle.net/QDh59/