Question

我想对齐3个div，彼此相邻。所以我将display:table用于父div，将display:table-cell用于内部3 div。

第2个div的宽度已知，第3个div的宽度未知。因此display:table-cell的使用对我来说非常有效，可以调整第3个div的宽度。

现在，如果我想使用margin-left或margin-right给出3个div之间的间距，则无效。请检查代码here。

如果我们能做到，请告诉我。提前谢谢。

Answer 1

这应该有效：

 #wrapper div {
      display: table-cell;
      height:100px;
      /* creates space */
      border:5px solid transparent;
      background-clip:padding-box;
  }

您可能想要设置一个不同的box-modell，以通过以下方式在元素的宽度中包含边框：

box-sizing:border-box;

Answer 2

使用border属性来提供

之类的空格

border:solid 10px transparent;

Answer 3

试试这个

#wrapper {
    display: table;
    table-layout: fixed;
    width:100%;
    height:100px;
    background-color:Gray;
    border-spacing:10px;
}

DEMO.

Answer 4

表格单元格没有边距。您可以使用透明边框稍微调整一下，如果这不能解决您的问题，那就别无选择了。

使用display时无法在div之间给出空格：table-cell

4 个答案: