关于div的对齐

Question

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

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

Answer 1

需要满足第一种情况，最常见的就是浮动，左边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>