关于div的对齐

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

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

阅读 247
评论
    4 个回答
    • 52
    <style>
            div>div{
                border-radius: 10px;;
            }
            .first-one{
                width:190px;
                height:200px;
                border:3px solid brown;
            }
            .second-one{
                width:250px;
                height:200px;
                border:3px solid brown;
            }
            .sub1,.sub2{
                width:100px;
                height:50px;
                background-color: red;
                border:1px solid black;
            }
            .first-one>.sub1{
                float:left;
            }
            .first-one>.sub2{
                float:right;
                margin-top:10px;
            }
            .second-one>.sub1{
                float:left;
            }
            .second-one>.sub2{
                float:left;
                margin-left:10px;
            }
    </style>
    <body>
        <div class="first-one">
            <div class="sub1"></div>
            <div class="sub2"></div>
        </div>
        <br>
        <div class="second-one">
            <div class="sub1"></div>
            <div class="sub2"></div>
        </div>
    </body>

    利用左右悬浮加上margin的设置 可以达到效果.
    为了避免高度塌陷,可以给父元素添加 固定的宽高, 或者是设置overflow:hidden等方法
    也可以用伪元素清除浮动

    div::after{
        content:"";
        display:block;
        clear:both;
    }

    div对齐.png