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

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将这样的伎俩。如果您不介意更改泡泡类的属性，则可以使用flexbox

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