float浮动使得div可以在一行显示

最新推荐文章于 2023-09-05 17:20:31 发布

weixin_38170468

最新推荐文章于 2023-09-05 17:20:31 发布

阅读量564

点赞数

原文链接：http://www.cnblogs.com/wfl9310/p/9172657.html

版权

  <style>
    .div1{
        width: 100px;
        height: 100px;
        background-color: blue;
        float: left;/*第一个div漂浮起来了，第二个div顶替了第一个位置*/
    }
        .div2{
            width: 200px;
            height: 100px;
            background-color: red;
            float: left;
        }
    .div3{
        width: 100px;
        height: 200px;
        background-color: yellow;
        float: left;
    }
        .div4{
            width: 200px;
            height: 200px;
            background-color: green;
            float: left;/*4个一起飘就从左向右横排排着飘 ，使得4个div在同一行*/
        }
    </style>
</head>
<body>
<!--div.div*4 tab加回车快速输入4个div-->
<div class="div1"></div>
<div class="div2" style="clear: left"></div>/*style="clear: left"清除左边的浮动，相当于换行*/
<div class="div3" style="clear: right"></div>
<div class="div4" ></div>

</body>

转载于:https://www.cnblogs.com/wfl9310/p/9172657.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_38170468

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
float浮动使得div可以在一行显示

<style> .div1{ width: 100px; height: 100px; background-color: blue; float: left;/*第一个div漂浮起来了，第二个div顶替了第一个位置*/ } .div2{ ...
复制链接

扫一扫