HTML/CSS內聯塊無浮動div內的div

我在DIV內有3個DIV。這些框會有一個圖像。目前他們是未來的圖像佔位符。我想用display: inline-block;排列在同一行上。出於某種原因，它們仍然是垂直的而不是水平的。我不想用float，因爲我覺得浮動應該用在其他地方。HTML/CSS內聯塊無浮動div內的div

HTML：

<div class="quickboxes"> 
    <div id="box1"><img name="" src="" width="75" height="75" alt="">1</div> 
    <div id="box2"><img name="" src="" width="75" height="75" alt="">2</div> 
    <div id="box3"><img name="" src="" width="75" height="75" alt="">3</div> 
</div>

CSS：

.quickboxes { 
    display: inline-block; 
} 

#box1 { 
    width: auto; 
} 

#box2 { 
    width: auto; 
} 

#box3 { 
    width: auto; 
}

來源

2013-03-06 James

顯示：內聯塊;需要在圖像div的CSS，而不是包含div。

來源

2013-03-06 18:13:45 Geneb

這個固定。有趣的是，我以爲你想要父母的div應用它。感謝您的幫助。有關如何均勻分隔子div的任何建議？作爲'保證金：0汽車;'什麼也沒做。 – James 2013-03-06 18:22:45

更改寬度：自動;在你的圖像divs是寬度：33％; – Geneb 2013-03-06 18:25:49

非常感謝您的幫助。我實際上使用了align-text：center，但我有一種感覺會在稍後發生。寬度：33％效果很好。 – James 2013-03-06 18:35:01

添加規則：

#box1, #box2,#box3 { 
display:inline-block; 
}

jsFiddle example

爲了讓這些箱子的行，你還可以設置對他們的inline-block的屬性，不僅僅是父容器（你可能不需要）。

來源

2013-03-06 18:14:03 j08691

避免使用inline-block的另一種方法是使用浮動。將它們漂浮在左邊並清除每個div s中的花車。

來源

2013-03-06 21:25:04

這將是更好，如果你有inline-block的兩個如圖所示：

.quickboxes { 
    display: inline-block; 
} 
#box1, #box2,#box3 { 
display:inline-block; 
}

而且居中這些箱子

.quickboxes { 
    display: inline-block; 
position: relative; 
left: -50%; /*- is important for outer div*/ 
} 
#box1,#boc2,#box3{ 
display: inline-block; 
position: relative; 
left: 50%; /* + is important for inner div*/ 
}

來源

2013-03-07 06:58:35

HTML/CSS內聯塊無浮動div內的div

回答

相關問題