Question

我想离婚两个细胞，在它们水平对齐时在它们之间形成一些白色区域，任何想法如何实现这一点？

 <div class="bubble">
      <div id="lover1" class="lover">cell1.</div>
      <div id="lover2" class="lover">cell2.</div>
 </div>

我试过了：

<style>
.bubble { 
  position: absolute; 
  left: 93px; 
  top: 21px; 
  width: 335px; 
  height: 284px; 
  display: table; 
  background-color: #ffcc99;
}

.lover {
  display: table-cell; 
  vertical-align: middle; 
  text-align: center; 
}
#lover2{
    margin-left: 100px;
}
</style>

Answer 1

<div class="bubble">
      <div id="lover1" class="lover">cell1.</div>
      <div id="lover2" class="lover">cell2.</div>
</div>

<强> CSS：

.bubble .lover {display:inline-block;margin-left:10px;}

这就是你需要的所有CSS。但是你出于某种原因使用了绝对定位，所以我无法评论这是否真的适合上下文。

Answer 2

使用border-spacing属性：

.bubble {
  /* add these lines */
  border-collapse: separate;
  border-spacing: 10px 0px;

  position: absolute; 
  left: 93px; 
  top: 21px; 
  width: 335px; 
  height: 284px; 
  display: table; 
  background-color: #ffcc99;
}

.lover {
  display: table-cell; 
  vertical-align: middle; 
  text-align: center;

  /* add some color to your cells to see there boundings */
  background: red;
}
#lover2{
    margin-left: 100px;
}

Answer 3

如果您使用flexbox来实现这一目标，那么很容易实现。如果您不介意更改bubble类的属性，可以执行flexbox

有关详细信息，请参阅https://css-tricks.com/snippets/css/a-guide-to-flexbox/。

简单的CSS：我如何分开两个单元格

3 个答案: