html - 两列高度相等

Question

我有 2 列。一种具有动态高度。

我想将第二列调整到与第一列相同的高度。

问题：

如何将高度设置为 div 与 divtwo具有相同的高度one？

注意：寻找 css/html 解决方案（无 JS）

JSFIDDLE：

JsFiddle 示例

HTML：

<div class="one"></div>
<div class="two"></div>
<div style="clear: both;">

CSS：

.one {height: 300px; float: left; width: 70%;}
.two {height: 50px; float: left; width: 30%;}

Answer 1

只需在此处使用此修改后的 css 和 html DEMO

HTML

<div class="wraper">
    <div class="one"></div>
    <div class="two"></div>
    <div style="clear: both;">
</div>

CSS

body{
    width:100%;
}
.wraper{
    display:table;
    width:100%;
}
.one {height: 300px; background: #f00; display:table-cell; width: 70%;}
.two {height: 50px; background: #000;  display:table-cell; width: 30%;}