我如何将多个＆＃34;亲属＆＃34; divs与堆叠图像？

Question

我想要一组侧面叠加的div，如下：

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

以D1为中心。我可以通过将D0设置为text-align:center来完成此操作。 （我不能使用margin：auto，因为我不知道D1-D4的宽度组合）。

但是，D1到D4包含一堆我要叠加的图像。我可以为D1设置position: relative，为img标记设置position:absolute。

问题在于，这会导致D1-D4看起来没有内容，并且他们失去了以text-align：center为中心的能力！还有其他方法可以达到我的目的吗？

Answer 1

使用display : inline-block d1, d2 d3和d4（以及vertical-align）并在父

上使用text-align: center

这些元素不需要相对定位

Answer 2

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

的的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/

Answer 3

你是否可以使用flot:left属性来删除它，你可以使用display:inline作为div，然后它将位于D0的中心

Answer 4

<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>