html - CSS、html 两列自动长度

Question

如何使这些列的宽度相同？不是修复方法。我想自动完成。这意味着当一个包含更多文本时，它会更长，因此第二个将同样长。 CSS

    article.leftnews {
    float: left;
    border-radius: 30px;
    width: 43%;
    padding-top: 1em;
    padding-left: 1em;
    padding-right: 1em;
    overflow: auto;
    border:5px solid #0000CC;
}
article.rightnews {
    border-radius: 30px;
    margin-left: 52%;
    padding-top: 1em;
    padding-left: 1em;
    padding-right: 1em;
    overflow: auto;
    border:5px solid #000066;
}
section{
    position:relative;
    margin-left:auto;
    margin-right:auto;
    width: 700px;
    text-align: justify;
}

My demo here

Answer 1

对我来说最好的方法是使用 CSS table和 table-cell

http://jsfiddle.net/2d9917o7/

更新:圆 Angular 样式，附加 <div>需要在每个表格单元格内。

http://jsfiddle.net/2d9917o7/1/

HTML

<div class="container">
    <article class="leftnews">left<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>end</article>
    <article class="rightnews">right</article>
</div>

CSS

.container {
    display: table;
    width: 100%;
}

.leftnews,
.rightnews {
    display: table-cell;
    width: 50%;
    background: pink;
}

.leftnews {
    background: lime;
}