Question

有没有办法强制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将并排出现并且会有一些填充....所以如果每行显示三个div，那么将需要三行来显示所有div内容。我知道css float属性可以用来获取效果，但我不擅长CSS。所以有人请帮忙。感谢

Answer 1

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

这应该使它们彼此相邻

Answer 2

你可以使用float方法，或者按照this JSFiddle使用display: inline-block：

div#main {
    width: 500px;
}

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

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

div#main不必有宽度。这里只给出了一个示例。

Answer 3

给1 2＆amp; 3属性float: left;

给4个属性clear: both;

给4 5＆amp; 6属性float: left;

给出7属性clear: both;

给出7,8,9属性float: left;

请不要使用属性“padding”！它在每个浏览器中的显示方式不同！

使用带有边距的周围div！

Answer 4

如果希望每个元素之间的距离相同，最简单的方法是浮动子元素，请在父元素上设置一个负边距，该边距与子元素上的边距相同，并使父元素的宽度为x倍。孩子+ x倍边距（如果你想要3个元素彼此相邻，则x为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/

使用CSS问题进行DIV定位

4 个答案: