当前位置：文江博客话题详情

CSS 布局 div-标签

关于div的对齐

发布于 2022-09-12 02:46:55 字数 210 浏览 24 评论 0

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

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

收藏 0

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

评论（4）

睫毛上残留的泪 2022-09-19 02:46:55

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

眉黛浅 2022-09-19 02:46:55

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

永不分离 2022-09-19 02:46:55

`

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

`
这样试试

￡冰雨忧蓝° 2022-09-19 02:46:55

<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

~没有更多了~

关于作者

暂无简介

0 文章

0 评论

24 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

已经忘了多久

文章 0 评论 0

15867725375

文章 0 评论 0

LonelySnow

文章 0 评论 0

走过海棠暮

文章 0 评论 0

轻许诺言

文章 0 评论 0

信馬由缰

文章 0 评论 0

友情链接

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的隐私政策了解更多相关信息。单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。

原文