高效前端-web高效编程与开发实践读书笔记：css-布局-三列布局使用float实现

最新推荐文章于 2021-07-24 13:11:50 发布

AboyL

最新推荐文章于 2021-07-24 13:11:50 发布

阅读量258

点赞数

分类专栏：读书笔记 html和css 文章标签： css

本文链接：https://blog.csdn.net/AboyL/article/details/80956093

版权

html和css 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

读书笔记

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<style>
  div{
    color: white;
  }
  .left{
    float: left;
    background: yellow;
  }
  .right{
    float: right;
    background: black;
  }
  .middle{
    background: red;
  }
</style>
<body>

  <div class="left">left</div>
  <div class="right">right</div>
  <div class="middle">mid</div>
</body>
</html>

为什么我们在使用float实现三列布局的时候要把right放到mid前面呢？因为div这种block元素会去尽量获取自己可以获取到的最大的宽度，那么如果是left mid right，在left占据了左边的位置的时候，mid就会去获取右边的全部位置，因此即使right是向右浮动，也只能去下一行了，而如果right在前面，计算先与mid，所以在mid来占位置之前就占据了右边的位置，那么mid就只能要中间的位置了，以此可以实现两边固定宽度，中间自适应的效果

AboyL

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
高效前端-web高效编程与开发实践读书笔记：css-布局-三列布局使用float实现

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; &l
复制链接

扫一扫