3

我想要一组横向堆叠的 div，如下所示：

D0
---------------------------------------
|     ------ ------ ------ ------     |
|     |    | |    | |    | |    |     |
|     | D1 | | D2 | | D3 | | D4 |     |
|     |    | |    | |    | |    |     |
|     ------ ------ ------ ------     |
---------------------------------------

以 D1 为中心。我可以通过将 D0 设置为text-align:center. （我不能使用边距：自动，因为我不知道 D1 - D4 组合的宽度）。

但是，D1 到 D4 包含一堆我想要叠加的图像。我可以通过设置position: relativeD1 和position:absoluteimg 标签来做到这一点。

问题是这会导致 D1-D4 看起来好像没有内容，并且他们失去了使用 text-align:center 居中的能力！还有其他方法可以实现我想要的吗？

4

4 回答 4

3

使用display : inline-blockford1, d2 d3和d4（与 a 一起vertical-align）并text-align: center在父级上使用

这些元素不需要相对定位

于 2012-04-18T06:07:13.037 回答
1

嘿，我想你现在可能像这样

CSS

.d0{
    width:70%;
    background:green;
    text-align:center;
    margin:0 auto;
}

.d0 div{
    display:inline-block;
    margin:10px 0;
}

 .d1{
    background:yellow;
    position:relative;
}

 .d2{
    background:pink;
}


 .d3{
    background:darkred;
}


 .d4{
    background:lightblue;
}

HTML

<div class="d0">

    <div class="d1">D1</div>
    <div class="d2">D2</div>
    <div class="d3">D3</div>
    <div class="d4">D4</div>

</div>
​

现场演示http://jsfiddle.net/rohitazad/qCtwp/

--------------------------------------------------

或者如果您使用的表比http://jsfiddle.net/rohitazad/qCtwp/1/

于 2012-04-18T06:25:50.527 回答
0

可能你正在使用flot:leftdiv 的属性，删除它，你可以使用display:inlinediv 然后它将位于 D0 的中心

于 2012-04-18T06:11:39.660 回答
-1 
<div id=d0 style="">
    <center><div id="dgroup" style="padding-top:10%;">
        <div id=d1 style="float:left;width=100px;height:180px">
              this is d1
        </div>

        <div id=d2 style="float:left;width=100px;height:180px">
              this is d2
        </div>

        <div id=d3 style="float:left;width=100px;height:180px">
              this is d3
        </div>

    </div></center>
</div>
于 2012-04-18T06:30:27.153 回答