有2个div,sub1,sub2同一个父div希望 当2个子div的宽度之和大于 父div的时候sub1左对齐,sub2在下面一行右对齐 当2个子div宽度之和小于 父div时,sub1左对齐,sub2紧挨着sub1,如下图
需要满足第一种情况,最常见的就是浮动,左边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>
需要满足第一种情况,最常见的就是浮动,左边div向左浮动,右边div向右浮动。但是这样就不会出现第二种情况
在浮动的基础上满足第二种情况,这需要借助一点辅助,比如在2个子div上面再包裹一层元素,这个元素需要能根据子元素的宽高把自己撑起来,比如行内块元素(inline-block)或浮动元素(float)