奇怪的三个div并排

Question

我是一个桌子人，但是我需要拖放一些div，所以我尝试无边框（正确的方式）。

这就是我想要做的：

所有元素之间的空间应为24px。我的主要问题是div（1,2,3）占用了100％的可用空间。宽度：100％将其发送到主容器之外。

到目前为止，这是我的代码：

HTML

<div id="mainContainer">
<div id="topContainer">Just the top one
</div>
<div id="table">
    <div id="Line1Container">
    <div id="container1" class="container">1
    </div>
    <div id="container2" class="container">2
    </div>
    <div id="container3" class="container">3
    </div>
</div>
<div id="Line2Container">
    <div id="container4" class="container">4
    </div>
    <div id="container5" class="container">5
    </div>
    <div id="container6" class="container">6
    </div>
</div>
</div>
</div>

我的css

#mainContainer {
    border: 1px solid lightgray;
    position:fixed;
    top: 80px;
    bottom:20px;
    left:80px;
    right:80px;
    overflow-y: scroll;
    overflow-x: hidden;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

#topContainer {
    border: 1px solid lightgray;
    border-radius: 10px;
    margin-left: 24px;
    margin-right: 24px;
    margin-top: 24px;
}

#table {
    display: table;
    margin: 24px;
    width: 95%;
}

#Line1Container, #Line2Container {
    display: table-row;
}

.container  {
    border: 1px solid lightgray;
    display: table-cell;
    width: 33%;
    border-radius: 10px;
}

如你所见，我尝试过table-cell方法，但在尝试float：left方法之前。

由于

Answer 1

Fiddle

您无法将px值与%值以及动态尺寸一起正确使用。 您应该使用x％而不是24px。 您可以在“细胞”上使用float: left

Answer 2

如何使用表格来分隔div？这种方式与td填充之间总是会有24px

看看这个小提琴：

http://jsfiddle.net/5zfEq/

加入：

#Line1Container {
    padding:12px;
}
#inner-table {
    width: 100%;
}
#inner-table td {
    padding: 12px;
}

基于@Edifice小提琴....谢谢;）