html - 在 div 容器中居中可变数量的 div

Question

我真的需要一些帮助，因为这让我抓狂!

我需要在父 div 中放置 x 个子 div(如果有帮助的话，也可以是 span)。子 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 特定样式表修复 IE 6/7 中的内联 block

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