margin负值与等高布局

HTML

<div class="container">
    <div id="colLeft" class="column-left">
        <h4>正方观点</h4>
        <p>观点1</p>
    </div>
    <div id="colRight" class="column-right">
        <h4>反方观点</h4>
    </div>
</div>
<div class="container">
    <p class="half">
        <input type="button" id="leftMore" value="更多正方观点">
    </p>
    <p class="half">
        <input type="button" id="rightMore" value="更多反方观点">
    </p>
</div>
					    

CSS

.container {
    margin: auto;
    max-width: 600px;
    overflow: hidden;
}
.column-left, .column-right {
    width: 50%;
    float: left;
    margin-bottom: -9999px;
    padding-bottom: 9999px;
    color: #fff;
}
.column-left { background-color: #34538b; }
.column-right { background-color: #cd0000; }
.half {
    width: 50%;
    float: left;
}
					    

JS

var $ = function (id) {
    return document.getElementById(id);
};
// 分栏元素

var colLeft = $('colLeft'), colRight = $('colRight');
// 按钮元素

var leftMore = $('leftMore'), rightMore = $('rightMore');

// 序号

var indexLeft = 1, indexRight = 0;

if (colLeft && colRight && leftMore && rightMore) {
    leftMore.onclick = function () {
        indexLeft = indexLeft + 1;
        colLeft.insertAdjacentHTML('beforeend', '
观点'+ indexLeft +'
');
    };
    rightMore.onclick = function () {
        indexRight = indexRight + 1;
        colRight.insertAdjacentHTML('beforeend', '
观点'+ indexRight +'
');
    };
}