两列的表彼此对齐

Question

我希望两列table在另一列之上，具有适当的边距或填充，就像您在Facebook用户创建的页面上看到的那样。我能得到的就是：http://jsfiddle.net/nBAyk/

请参阅屏幕截图：

请看红色问号。我想要正确调整Facebook用户创建页面等表格的对齐方式。

请帮忙！

Answer 1

这不像您希望的那样动态：http://jsfiddle.net/ytFee/

<div class="row">
<div class="half" id="columnA">
    <table>...</table>
    <table>...</table>
    <table>...</table>
</div>

<div class="half" id="columnB">
    <table>...</table>
    <table>...</table>
    <table>...</table>
</div>

确定要显示的列数后，您可能需要设置广告订单

Answer 2

我已经用提供CSS的方式更新了提供的小提琴：http://jsfiddle.net/mikemccaughan/nBAyk/1/

.latest_posts_bit{
    list-style: none;
    margin: 0;
    padding: 0;
    -moz-columns: 2;
    -webkit-columns: 2;
    columns: 2;
}
.latest_posts_bit li {
    display: inline-block;
    width: 100%;
}

我用columns property from CSS3来做，所以你的里程可能会有所不同。例如，它不会在早于10​​的IE上工作，并使用供应商前缀在其他浏览器上工作。有关浏览器支持的详细信息，请参阅http://caniuse.com/#search=columns。