html - 两个 Column 的表相互对齐

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%;
}

我使用CSS3 中的 columns 属性来做到这一点，所以你的里程可能会有所不同。例如，它不能在早于 10 的 IE 上运行，并使用供应商前缀在其他浏览器上运行。有关浏览器支持的更多信息，请参阅http://caniuse.com/#search=columns 。