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/

圆角样式的

更新：，每个表格单元格中需要额外的<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;
}

CSS，html两列自动长度

1 个答案: