关于div的对齐

有2个div,sub1,sub2
同一个父div
希望 当2个子div的宽度之和大于 父div的时候
sub1左对齐,sub2在下面一行右对齐

当2个子div宽度之和小于 父div时,
sub1左对齐,sub2紧挨着sub1,
如下图
Snap1.bmp

阅读 247
评论
    4 个回答
    • 12.4k

    需要满足第一种情况,最常见的就是浮动,左边div向左浮动,右边div向右浮动。但是这样就不会出现第二种情况

    在浮动的基础上满足第二种情况,这需要借助一点辅助,比如在2个子div上面再包裹一层元素,这个元素需要能根据子元素的宽高把自己撑起来,比如行内块元素(inline-block)或浮动元素(float)

    <style type="text/css">
        .dbox{
            width: 200px;
            height: 200px;
            border: 1px solid #f00;
        }
        .dp{
            display: inline-block;
        }
        .d1,.d2{
            height: 30px;
        }
        .d1{
            float: left;
            width: 100px;
            background: #f0f;
        }
        .d2{
            float: right;
            width: 50px;
            background: #0ff;
        }
    </style>
    
    <div class="dbox">
        <div class="dp">
            <div class="d1"></div>
            <div class="d2"></div>
        </div>
    </div>