设置多个元素向右浮动

本文转载自查看原文 2019-08-26 19:15 365 HTML+CSS

1.设置元素并列向左浮动　　float:left;

2.设置元素并列向右浮动

如果仅仅设置float:right;元素会向右浮动，但是顺序会改变。

解决办法看代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>多个元素浮动方向</title>
<style>
    .container{
        width:800px;
        height:300px;
        border:10px solid #ccc;
        }
    .main{
        width:300px;
        height:100px;
        backgound-color:#ccc;
        float:right;
        }
    .box{
        width:100px;
        height:100px;
        /* 向左浮动 文字方向1 2 3 */
        /*float:left;*/
        /* 向右浮动 文字方向 3 2 1 */
        /*float:right;*/
        /* 解决办法 将所有需要浮动的元素放入一个边框 设置边框向右浮动,设置边框内部向左浮动
            注意：在设置边框时，需设置父元素边框的大小，否则父元素的大小未撑开,设置不起作用
         */
        float:left;
        }
    .box1{
        background-color:yellow;
        }
    .box2{
        background-color:deeppink;
        }
    .box3{
        background-color:blue;
        }
</style>
</head>
<body>
    <div class="container">
        <div class="main">
            <div class="box box1">1</div>
            <div class="box box2">2</div>
            <div class="box box3">3</div>
        </div>
    </div>
</body>
</html>

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 CSS Float(浮动)：使元素向左或向右移动，其周围的元素也会重新排列如何让设置浮动的元素水平居中浮动元素重叠问题如何让浮动的元素换行？？css 使用伪元素清除浮动伪元素清除浮动及原理浮动元素如何水平居中浮动元素margin负值的应用 CSS浮动为什么不会遮盖同级元素浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响？清除浮动指什么？如何清除浮动？