div的并列

最新推荐文章于 2023-11-22 12:38:35 发布

UKD

最新推荐文章于 2023-11-22 12:38:35 发布

阅读量351

点赞数 3

本文链接：https://blog.csdn.net/m0_52354769/article/details/115611232

版权

div并列

一般来说，div属于块级元素，标准流。但是这样就会造成两个div无法在同一行表示。

<style>
    div{
      width:100px;
      height: 100px;
    }
    .left{
      background-color: yellow;
    }
    .right{
      background-color: red;
    }
  </style>
<body>
<div class="left" ></div>
<div class="right"></div>
</body>

在这个代码中，最终的结果就是连个div在不同的两行。
效果：
在这里插入图片描述
但是如果在style中加入float这个属性，就会使两个div在同一行表示，标准流变为浮动。

<style>
    div{
      float: left;
      width:100px;
      height: 100px;
    }
    .left{
      background-color: yellow;
    }
    .right{
      background-color: red;
    }
    </style>
    <body>
<div class="left" ></div>
<div class="right"></div>
</body>

在这里插入图片描述属性float: left;就解决了问题。让他变为浮动，同行。

UKD

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
div的并列

div并列一般来说，div属于块级元素，标准流。但是这样就会造成两个div无法在同一行表示。<style> div{ width:100px; height: 100px; } .left{ background-color: yellow; } .right{ background-color: red; } </style><body><div class
复制链接

扫一扫