使用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定位问题

回答

相关问题