设置多个元素向右浮动

最新推荐文章于 2024-03-05 11:12:23 发布

weixin_30646505

最新推荐文章于 2024-03-05 11:12:23 发布

阅读量1.5k

点赞数 1

原文链接：http://www.cnblogs.com/glmkeep/p/11287695.html

版权

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>

转载于:https://www.cnblogs.com/glmkeep/p/11287695.html

weixin_30646505

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
设置多个元素向右浮动

1.设置元素并列向左浮动　　float:left;2.设置元素并列向右浮动如果仅仅设置float:right;元素会向右浮动，但是顺序会改变。解决办法看代码：<!doctype html><html><head><meta charset="utf-8"><title>多个元素浮动方向<...
复制链接

扫一扫