使用CSS問題的DIV定位問題

有什麼辦法可以強制div並排顯示在頁面上，而不是一個接一個。使用CSS問題的DIV定位問題

假設我有主的div喜歡和它有許多孩子的div。

<div id='main'> 
<div>my content 1 </div> 
<div>my content 2 </div> 
<div>my content 3 </div> 

<div>my content 4 </div> 
<div>my content 5 </div> 
<div>my content 6 </div> 

<div>my content 7 </div> 
<div>my content 8 </div> 
<div>my content 9 </div> 
</div>

現在我想，每個線三條格將側過來側會有一些填充....所以，如果三個格出現在每行，然後三行會被要求出示所有DIV內容。我知道CSS浮點屬性可以用來獲得效果，但我不擅長CSS。所以請有人幫忙。感謝

來源

2011-12-20 Keith Costa

你可以去浮法，或者你可以使用display: inline-block，按this JSFiddle：

div#main { 
    width: 500px; 
} 

div#main div { 
    width: 30%; 
    display: inline-block; 

    /* IE hacks */ 
    *display: inline; 
    zoom: 1 
}

div#main不必有一個寬度。這裏只是一個示範。

來源

2011-12-20 18:12:48 Bojangles

做得好的兩個ü....謝謝 – 2011-12-20 18:17:24

#main div{float:left; width:33%; display:block;}

這應該對準旁邊它們彼此

來源

2011-12-20 18:11:18

小提琴的js這裏http://jsfiddle.net/rmYr8/ – 2011-12-20 18:14:09

但我要三個格出現在每一行並不是所有的...如何實現它。 – 2011-12-20 18:15:49

看到小提琴的例子，只有三個顯示每行:) http://jsfiddle.net/rmYr8/ – 2011-12-20 18:16:30

得到1- 2 & 3屬性float: left;

得到4-屬性clear: both;

得到4 5 & 6屬性float: left;

得到7-屬性clear: both;

得到7,8 ，9屬性float: left;

請不要使用屬性「填充」！它在每個瀏覽器中顯示不同！

改爲使用具有餘量的周邊div！

來源

2011-12-20 18:14:53 waldiphil

如果你想每一個元素之間的距離相同的最簡單方法是浮動的孩子，設置的大小與對孩子的保證金相同的父元素陰性切緣，使家長X倍寬隨着孩子+保證金x次（其中x是3，如果你想3個元素彼此相鄰）是這樣的：

#main { margin: -10px 0 0 -10px; width: 330px} 
#main > div { margin: 10px 0 0 10px; width: 100px; float: left;}

不要忘了父設置overflow: hidden如果你不希望它崩潰。

這裏你可以看到一個例子：http://jsfiddle.net/mCEGf/

來源

2011-12-20 18:21:34

使用CSS問題的DIV定位問題

回答

相關問題