Question

我真的需要一些帮助，因为这让我疯了！

我需要在父div中定位x个子div（或者如果有帮助的话，跨越）。儿童div需要居中。

我知道子div的宽度，让我们说它是100px。父div的宽度为700px。

同样，子div的数量可以从1到7不等。

子div包含图像和短文本。

我试图用疯狂的Photoshop技巧来说明我想要的结果，但作为新用户，我不允许上传图片。

请在此处查看我的插图：http://whiteboxstudio.dk/div%20positioning.jpg

我希望这对你来说非常好的css黑客帮助我。

谢谢！

Answer 1

HTML

<div class="parent-div">
    <div></div>
    <div></div>
    <div></div>
</div>

这个css应该有效：

.parent-div {
    text-align: center;
}

.parent-div div {
    border: green 1px solid;
    display: inline-block;
}

.parent-div div:first-of-type {
    border-color: blue;
}

.parent-div div:last-of-type {
    border-color: red;
}

修复IE 6/7中的内联块，用于特定样式表

.parent-div div {
    zoom:1; /* gives layout */
    *display: inline; /* ie6/7 inline */
    _height: 30px; /* ie6 height - height of children */
}

Answer 2

这样的东西？ HTML：

<div id="container">
    <div id="padder">
    <span class="blue">
        Blue
    </span>
    <span class="green">
        Green
    </span>
    <span class="red">
        Red
    </span>
</div>
</div>

CSS：

#container{
   width: 500px;
   border: 1px solid #000000;
   text-align: center;
}
#padder{
      margin: 0 auto;
}
.blue{border: 1px solid #0000ff; }
.green{border: 1px solid #00ff00;}
.red{border: 1px solid #ff0000; }

小提琴： http://jsfiddle.net/LU7Vp/

Answer 3

单向:(但使用内联块）http://jsfiddle.net/2uKWC/

<div id="parent">

    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>

</div>


#parent{
    height:100px;
    border:thin solid yellow;
    text-align:center;
}

.child{
    display:inline-block;
    border:thin solid blue;
    width:100px;
    height:100px;

}

在div容器内居中可变数量的div

3 个答案: