问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

关于div的对齐

头像
zhuzhuzhu
    814

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

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

    cssdiv-标签布局
    阅读 3.6k
    4 个回答
    得票最新
    头像
    hfhan
      28.9k72241
      ✓ 已被采纳

      需要满足第一种情况，最常见的就是浮动，左边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>
      头像
      君迹我心
        5.1k41927

        左边向左浮动，右边向右浮动，父元素清除浮动以免坍塌。

        头像
        zzgzzg00
          3.7k21320

          `

          <html>
    <head>
        <title>option chain</title>
        <meta charset="utf-8" />
        <style>
            * {
                padding: 0;
                margin: 0;
                box-sizing: border-box;
            }
            .container {
                width: 50vh;
                background-color: yellow;
            }
            .outer {
                max-width: max-content;
                display: flex;
                height: 200px;
                flex-wrap: wrap;
            }
            .left, .right {
                width: 100px;
                height: 100px;
            }
            .left {
                background-color: red;
            }
            .right {
                background-color: green;
                margin-left: auto;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="outer">
                <div class="left">left</div>
                <div class="right">right</div>
            </div>
        </div>
    </body>
</html>

          `
          这样试试

          头像
          LimeT
            5539
            <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

            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            推荐问题
            宣传栏