兩個div對象的CSS中心div子對象

Question

我又回到了另一個可能是蹩腳的CSS問題。

所以我有一個容器div，裏面有兩個配對的div，每個div都有兩個div。我想用他們之間的平等空間爲所有四個人辯護。

我有什麼的時刻：

HTML：

<div class="container"> 
    <div class="pairsWithinContainer"> 
     <div> 
     </div> 
     <div> 
     </div> 
    </div> 
    <div class="pairsWithinContainer"> 
     <div> 
     </div> 
     <div> 
     </div> 
    </div> 
</div> 

CSS：

.container { 
    width: 100%; 
    height: 200px; 
    background-color: blue; 
    padding: 2px; 
} 

.container > div { 
    display: inline-block; 
    width: 49.5%; 
    height: 200px; 
    background-color: yellow; 
} 

.pairsWithinContainer > div { 
    display: inline-block; 
    background-color: green; 
    width: 50px; 
    height: 100%; 
} 

的jsfiddle：https://jsfiddle.net/tyzdhzt2/9/

我想要做什麼：http://sketchtoy.com/67874588

知道CSS的人請幫忙。

Answer 1

我建議用display:flex而不是display:inline-block來做這個。

將容器設置爲彈性盒會自動將您的內容移動到一行中。 flex-direction:row將使該行成爲一行，flex-direction:column將使其成爲一列。使用justify-content:space-around使容器盒在所有兒童周圍均勻分佈空間。

要使當瀏覽器收縮容器的第一行換行，給那些方框一分鐘-width屬性和給他們的纏繞元件flex-wrap:wrap像這樣：

.container { 
 
    width: 100%; 
 
    height: auto; 
 
    background-color: blue; 
 
    padding: 2px; 
 
    display:flex; 
 
    justify-content:space-around; 
 
    flex-wrap:wrap; 
 
} 
 

 
.container > div { 
 
    display: flex; 
 
    justify-content:space-around; 
 
    width: 49.5%; 
 
    height: 200px; 
 
    min-width:400px; 
 
} 
 

 
.pairsWithinContainer > div { 
 
    background-color: green; 
 
    width: 50px; 
 
    height: 90%; 
 
}

<div class="container"> 
 
    <div class="pairsWithinContainer"> 
 
     <div> 
 
     </div> 
 
     <div> 
 
     </div> 
 
    </div> 
 
    <div class="pairsWithinContainer"> 
 
     <div> 
 
     </div> 
 
     <div> 
 
     </div> 
 
    </div> 
 
</div>

Answer 2

這裏的一個解決方案我已經根據前面提出的類似問題起草了，horizontally center div in a div

我已經分出了一個解決方案jsfiddle

HTML版本：

我已調整了您的HTML有點希望使其更容易跟進：

<div class="container" id="outer"> 
    <div class="inner yellow" id="inner1"> 
     <div class="inner green"></div> 
    </div> 
    <div class="inner yellow" id="inner2"> 
     <div class="inner green"></div> 
    </div> 
    <div class="inner yellow" id="inner3"> 
     <div class="inner green"></div> 
    </div> 
    <div class="inner yellow" id="inner4"> 
     <div class="inner green"></div> 
    </div> 
</div> 

CSS版本：

如同HTML，我已經重構了一下CSS，希望更容易遵循：

.container { 
    width: 100%; 
    height: 200px; 
    background-color: blue; 
    padding: 2px; 
    /* Firefox */ 
    display: -moz-box; 
    -moz-box-pack: center; 
    -moz-box-align: center; 
    box-sizing: -moz-border-box; 
    /* Safari and Chrome */ 
    display: -webkit-box; 
    -webkit-box-pack: center; 
    -webkit-box-align: center; 
    box-sizing: -webkit-border-box; 
    /* W3C */ 
    display: box; 
    box-pack: center; 
    box-align: center; 
    box-sizing: border-box; 
    } 

.inner { 
    width: 50%; 
    height: 100%; 
    border: none; 
    /* Firefox */ 
    display: -moz-box; 
    -moz-box-pack: center; 
    -moz-box-align: center; 
    box-sizing: -moz-border-box; 
    /* Safari and Chrome */ 
    display: -webkit-box; 
    -webkit-box-pack: center; 
    -webkit-box-align: center; 
    box-sizing: -webkit-border-box; 
    /* W3C */ 
    display: box; 
    box-pack: center; 
    box-align: center; 
    box-sizing: border-box; 
} 

.yellow { 
    width: 25%; 
    background-color: yellow; 
    } 

.green { 
    width: 25%; 
    background-color: green; 
} 

以下是關於的更多信息from CSS-Tricks