簡單的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/。