divs之间的空格 - display table-cell [英] space between divs - display table-cell

问题描述

我有两个div：

 < div style =display：table-cellid =div1 > 
 content 
< / div> 
 
< div style =display：table-cellid =div2> 
 content 
< / div> 
  

有一种方法可以在这两个div ：table-cell ）？

解决方案

您可以使用 border-spacing 属性：

HTML ：

 < div class =table> ; 
< div class =row> 
< div class =cell>单元格1< / div> 
< div class =cell>单元格2< / div> 
< / div> 
< / div> 
  

CSS：

  .table {
 display：table; 
 border-collapse：separate; 
 border-spacing：10px; 
} 
 
 .row {display：table-row; } 
 
 .cell {
 display：table-cell; 
 padding：5px; 
 background-color：gold; 
} 
  

JSBin演示

任何其他选项？

不是真的。

为什么？
$ b

• margin 属性不适用于 display：table-cell 元素。


• padding 属性不会在单元格边缘之间创建空格。


• float table-cell 元素的预期行为，它们可以与其父元素一样高。

I have here two divs:

<div style="display:table-cell" id="div1">
    content
</div>

<div style="display:table-cell" id="div2">
    content
</div>

Is there a way to make space between these two divs (that have display:table-cell)?

解决方案

You can use border-spacing property:

HTML:

<div class="table">
    <div class="row">
        <div class="cell">Cell 1</div>
        <div class="cell">Cell 2</div>
    </div>
</div>

CSS:

.table {
  display: table;
  border-collapse: separate;
  border-spacing: 10px;
}

.row { display:table-row; }

.cell {
  display:table-cell;
  padding:5px;
  background-color: gold;
}

JSBin Demo

Any other option?

Well, not really.

Why?

• margin property is not applicable to display: table-cell elements.
• padding property doesn't create space between edges of the cells.
• float property destroys the expected behavior of table-cell elements which are able to be as tall as their parent element.

这篇关于divs之间的空格 - display table-cell的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！