[分享]css不用浮动div居右

很多初学者在做网页布局时会选择使用浮动（float）来实现div居右的效果。但是，其实并不一定非要使用浮动来完成这个任务，下面就来介绍一些不用浮动div居右的方法。 左侧内容 右侧内容 .cont...

很多初学者在做网页布局时会选择使用浮动（float）来实现div居右的效果。但是，其实并不一定非要使用浮动来完成这个任务，下面就来介绍一些不用浮动div居右的方法。

 <div class="container">
        <div class="left">左侧内容</div>
        <div class="right">右侧内容</div>
    </div>

    <style>
        .container {
            display: flex;
            justify-content: space-between;
        }

        .container .right {
            margin-left: auto;
        }

        .container .left {
            margin-right: auto;
        }
    </style> 

该示例代码中，使用了flex布局来实现div居右的效果。container容器使用display:flex属性，将容器内的子元素分为两列，并让它们各自占据一半的宽度。然后使用justify-content: space-between属性，将左侧内容向左对齐，右侧内容向右对齐，并在它们之间留下一些空间。

而为了将右侧内容居右，我们使用了margin-left: auto属性，将右侧内容的左外边距设置为自适应的值，从而让它向右移动，直到整个容器的右侧。同理，为了使左侧内容居左，我们使用了margin-right: auto属性。

除了使用flex布局，还可以使用float:left属性来实现div居右。在container容器中，先放置左侧内容，然后使用position:relative属性将其定位。接着，将右侧内容放置在容器内，并使用position:absolute;top:0;right:0属性来将其定位到容器的右侧。最后，为左侧内容添加padding-right属性，以确保它不会被右侧内容覆盖。

 <div class="container">
        <div class="left">左侧内容</div>
        <div class="right">右侧内容</div>
    </div>

    <style>
        .container {
            position: relative;
            padding-right: 200px; 
        }

        .container .left {
            float: left;
        }

        .container .right {
            position: absolute;
            top: 0;
            right: 0;
            width: 200px;
        }
    </style> 

使用这些方法可以实现不用float属性也能让div元素居右的效果。当然，这些方法都有各自的缺点，需要结合实际情况选择合适的方法。