如何创建这样的布局，其中两边的高度始终相同？

Question

如何使用HTML和CSS创建如下布局？

我不想使用表格，因为三个单元格中的每个单元格中的信息都不是表格式。

此外，设计需要灵活，因为如果一侧的内容垂直长于另一侧的内容，那么短边将向下伸展，使其与另一侧的高度相同侧。因为内容虽然多种多样，但是没有办法提前知道哪一方会更长，所以不能做出任何假设。

最后，这个设计需要在IE8中保持，并且中间的垂直线必须完全在中间，尽管左侧的水平线不必垂直居中。

谢谢。

Answer 1

这是我做的一件很快的事情，你需要根据自己的需要进行调整，但它就像你问的那样工作

<强> HTML

<div class="container">
<div class="left">
<div class="left1">
blah
</div>
<div class="left2">
blah blah
</div>
</div>

<div class="right">
 blahhasgdgas djkasghd kasdkjgsad 
</div>
</div>

<强> CSS

*{-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */}
.container{padding:0; margin:0; position:absolute; top:0; left:0; bottom:0; right:0; width:100%; height:100%}
.left{height:100%;box-sizing: border-box;background:#fc0; margin:0; width:50%; float:left; padding:10px}
.left1{height:49%; background:#845; margin:1%; padding:1%}
.left2{height:49%; background:#845; margin:1%; padding:1%}
.right{height:100%;box-sizing: border-box;background:#654; margin:0; width:50%; float:left; padding:10px}