html - 扩展两个 div，类似于 wordpress 仪表板中的 div

Question

我在一个页面上有两个具有相同高度位置的 div。我正在尝试使它们可扩展，就像 WordPress 仪表板区域中发生的那样分配:

现在我已经扩展了左边的 div，但只有右边的 div 保持相同的宽度。我需要同时扩展放大和缩小。

知道这是怎么做到的吗？

过去一个小时我一直在查找它，但我找不到任何东西。

教程的链接会很酷(祝你好运)。

编辑:

伙计们，我发现了类似的东西:http://jsfiddle.net/Khez/2zLPF/embedded/result/

您看到并排展开的两个 div 了吗？绿色和蓝色的……

Answer 1

如果您希望 div 根据其容器的宽度动态变化，请使用百分比设置宽度:

HTML:

<div class="column">
    <div class="wrapper">
        <p>Text</p>
    </div>
</div>
<div class="column">
    <div class="wrapper">
        <p>Text</p>
    </div>
</div>

CSS:

.column {
    float: left;
    width: 50%; }
.column div { margin: 0 20px; /* Set the spacing between the cells */ }

预览:http://jsfiddle.net/Wexcode/F7h2C/

注意:因为您将列的组合宽度设置为 100%，如果您希望它们打开，则不能向 .column 添加填充同一条线。内部 div wrapper 将允许您在两列之间添加间距。您应该将所有背景属性应用于 .wrapper。