html - 简单的 CSS : How do I break two cell apart

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。但是您出于某种原因使用了绝对定位，所以我无法评论这在上下文中是否真的合适。