css - 奇怪的三个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;
}

如您所见，我尝试了表格单元方法，但在尝试使用 float: left 方法之前。

谢谢

Answer 1

小提琴

您不能将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 fiddle ....谢谢;）