CSS內聯塊固定寬度的瓷磚

我正在構建一個基於瓷磚的組合，Wordpress主題，我不能讓瓷磚正確居中在他們的父div。 Here's the static page（我正在從.cu.cc asap遷移）。我用inline-block對齊全部將它們放在一排，並有margin風格保持瓷磚之間的差距，但什麼我得到是這樣的（紅線補充）：CSS內聯塊固定寬度的瓷磚

Faulty Align

我想要將瓷磚對齊到紅線 - 我該怎麼做？

這裏是HTML的歸結版本：

<div class="content-wrapper"> 
<div class="tile"></div> 
<div class="tile"></div> 
<div class="tile"></div> 
</div>

而CSS：

.content-wrapper{ 
width: 678px; 
margin-top: 66px; 
margin-left: auto; 
margin-right: auto; 
text-align: center; 
} 
.tile{ 
display:inline-block; 
width: 182px; 
height: 295px; 
background-color: #e1e1e1; 
border: solid 1px rgba(176,176,176,0); 
margin-bottom: 64px; 
margin-right: 35px 
}

感謝，奧利弗

來源

2013-05-19 OliverW

你能增加瓷磚的右邊距嗎？ –

@Explosion Pills這是我會想到的，但它進一步擾亂了一切。 – OliverW

我會指出，:last-child添加到卡爾·安德烈的回答在IE8不支持，所以這將是很好的切換到

.content-wrapper .tile { 
    margin-left: 10px; 
} 
.content-wrapper .tile:first-child { 
    margin-left: 0px; 
}

更聰明的決定是使用以下命令：

.content-wrapper .tile + .tile { 
    margin-left: 10px; 
}

短短三線而不是6，優雅的作品everythere。

此外，如果您厭倦了手動輸入保證金並且想要justify類似的行爲，請考慮 Fluid width with equally spaced DIVs。

來源

2013-05-19 21:45:01 fyodorananiev

嘗試添加此：

.tile:last-child{ 
    margin-right : 0; 
}

你div居中，b UT斯達康的最後一個div保證金是搞亂元素

來源

2013-05-19 21:24:48

或者，您可以將右邊距分開一半，並將該值用於相等的水平邊距:) – Terry

謝謝！但我試圖將它添加到'.tile'中，但效果不大。 – OliverW

CSS內聯塊固定寬度的瓷磚

回答

相關問題