显示内联而不浮动

Question

我有3个表，如下所示： 我想做的是将它们全部排成3行，每个表之间有一个空格（底部表格位于红色正方形的位置）。我所遇到的问题很明显，但我似乎无法摆脱表格之间的差距而不使用负边距我想避免，因为我听说这不是好习惯（浏览器可能会破坏它）。是否也可以在不浮动的情况下对齐表格？我曾试图使用其中的一些技巧，但似乎都没有效果：http://css-tricks.com/fighting-the-space-between-inline-block-elements/

这是我的css： 我的主体宽度为901像素，所以我只是将每张桌子的宽度改为300

.measure_data {
    width: 299px;
    border: solid 1px;
    border-collapse: collapse;
    display: inline-block;
}

Answer 1

使用display: inline-block;时，元素之间的空格是不可避免的。试试这个。你需要确保你＆＃34; tie＆＃34;差距在一起，如此：

<div>
    <p>1/3</p>
</div><!--
--><div>
    <p>1/3</p>
</div><!--
--><div>
    <p>1/3</p>
</div>

Answer 2

您应该将表格缩小为299到290

.measure_data {
    width: 290px;
    border: solid 1px;
    border-collapse: collapse;
    display: inline-block;
}

点击此处查看jsfiddle

Answer 3

将位置添加到第二个和第三个表：

.measure_data {
    width: 299px;
    border: solid 1px;
    border-collapse: collapse;
    display: inline-block;
}
.2{
   position: absolute; 
}
.3{
   position: relative; 
}