关于div的对齐

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

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

阅读 250
评论
    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>
      • 2.8k

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

        • 2.6k

        `

        <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>
        

        `
        这样试试

          • 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

            撰写回答

            登录后参与交流、获取后续更新提醒