2

我有以下 HTML 和 CSS

#one,
#two {
  display: table-cell;
  vertical-align: middle;
  height: 47px;
  background: red;
  border-collapse: separate;
  border-spacing: 10px;
}
<div>
  <div id="one">one</div>
  <div id="two">two</div>
</div>

演示

但无法达到我想要的效果。我需要两个 div 之间的空间。如果我提供填充值，它将提供空间但不删除背景。

4

6 回答 6

3

您需要将border-spacingandborder-collapse规则放在父div 上，而不是table-celldiv 上。

于 2013-07-24T09:13:41.823 回答
1

更改display: table-cell;为，display: inline-table;或者display: inline; 我希望这是您正在寻找的。

于 2013-07-24T09:17:09.680 回答
1

试试 JSFiddle

http://jsfiddle.net/arunberti/WNKCZ/1/

#main
{
    border-spacing:10px;
}
于 2013-07-24T09:19:45.253 回答
1

使用以下属性：

<div style="border-spacing: 10px;">
    <div id="one">one</div>
    <div id="two">two</idv>
</div>

或使用以下 css 样式：

#one, #two{
    display: table-cell; 
    vertical-align: middle; 
    height: 47px; 
    background: red;
    border-collapse: separate; 
    border-spacing: 10px;
    border: 3px solid #fff;
}
于 2013-07-24T09:33:56.007 回答
1

在父 div 中添加“border-spacing”

<div style="border-spacing: 10px;">
<div id="one">one</div>
<div id="two">two</div>
</div>
于 2013-07-24T09:30:28.823 回答
0

只需更改您的 css 代码，如下所示：

#one, #two{
    display: inline; 
    vertical-align: middle; 
    height: 47px; 
    background: red;
    border-collapse: separate; 
    border-spacing: 10px;
}

我将显示属性table-cell更改为inline。你也可以使用 内联表

接下来，您可以使用margin属性在两个块之间留出空间（即 margin-left:20px;）。

于 2013-07-24T09:28:39.407 回答