Question

这种情况与传统的保证金有些不同：0 auto。

我尝试将div放在另一个div上方，而两个div都在同一个div中（不需要看起来像是在同一个div中，因为蓝盒子会比上面的黑盒子大）！

我创造了一个迄今为止我所得到的小提琴，我确实将顶部div对齐到排序中心，但它的中心位于每个div的左上角。我想在某种意义上居中，蓝盒子在黑盒子上方，但蓝盒子的中间线与黑盒子的中线对齐。像这样的东西

 |______|

   |__|

顶部框蓝色，底部框黑色

但我无法想办法做到这一点。

http://jsfiddle.net/adamchenwei/nay8fe5q/

HTML

<div class="blockcontainer">
    <div class="blockcenterbox">
        <div class="blocktop">abc</div>
    </div>
    <div class="blockbottom"></div>
</div>

CSS

.blockcontainer {

    margin:0 auto;

    width:25px;

    background-color:#00CC66;

}

.blocktop {

    width:100px;

    background-color:#6699FF;

    height:50px;

}

.blockcenterbox {

    width: .1px;

    height: 5px;

    background-color: yellow;

    margin: 0 auto;

    position: relative;

    float: none;

}

.blockbottom {

    width:25px;

    height:25px;

    background-color:black;

}

Answer 1

这是你想要实现的目标吗？

.blue {
    width: 200px;
    height: 100px;
    background-color: blue;
}

.black {
    width: 150px;
    height: 80px;
    background-color: black;
    margin: 0 auto;
}

.blockcontainer {
    margin: 0 auto;
    width: 200px;
}

<div class="blockcontainer">
    <div class="blue"></div>
    <div class="black"> </div>
</div>

Answer 2

在plnkr尝试此工作链接： http://plnkr.co/edit/OaQBWxlIfa2fVvanKKEl?p=preview

希望它有所帮助！ HTML

<div class="blockcontainer">
    <div class="blockcenterbox">
        <div class="blocktop">abc</div>
    </div>
    <div class="blockbottom"></div>
</div>

CSS

.blockcontainer {
            width:200px;
        height:200px;
            background-color:#00CC66;
        overflow:hidden;

        }

        .blocktop {
            width:100px;
            background-color:#6699FF;
            height:50px;

        }

        .blockcenterbox {
            width: 100px;
            height: 50px;
            background-color: yellow;
            margin: 0 auto;
        }

        .blockbottom {
            width:25px;
            height:25px;
            background-color:black;
        margin: 0 auto;
        }

如何将div一直放在另一个div之上

2 个答案: