html 三列布局（两列固定宽度，一列自适应）

最新推荐文章于 2024-04-28 14:57:52 发布

mika85489

最新推荐文章于 2024-04-28 14:57:52 发布

阅读量7.1k

点赞数 6

分类专栏： html 文章标签： html 布局

本文链接：https://blog.csdn.net/mika85489/article/details/52234566

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

摘要：最近在做移动端页面布局，偶有心得，记录于此。

不多说，先上代码：

<html>
<head>
    <style type="text/css">
        body{
            margin:0;
            font-size: 50px;
            text-align: center;
        }
        .left{
            width:180px;
            height:500px;
            float:left;
            background:#F39;
        }
        .right{
            width:300px;
            height:500px;
            float:right;
            background:#F99;
        }
        .center{
            width:auto;
            height:500px;
            margin-left:190px;
            margin-right:310px;
            background:#33C;
        }
    </style>
</head>
<body>
<div class="left">左</div>
<div class="right">右</div>
<div class="center">中</div>
</body>
</html>

代码其实很简单，但是有一个细节问题：在body标签里面，三个盒子在文档流里面正常的顺序是，左右中，为什么是这样呢？为什么不是左中右呢？
这里就涉及到文档流的问题，如果是左中右的文档流，会出问题：左盒子向左浮动，脱离文档流，中盒子占据左盒子的位置，在文档流中，右盒子本来在文档流的位置会因为是块级元素，会放在中盒子的下面一行，再右浮动，就变成这样了：
这里写图片描述
所以，需要把三个盒子按照左右中来放入文档流，这样左右两个盒子都先浮动脱离文档流了，中盒子就会占据左右盒子的位置，设置好合适的margin就可以实现这样的效果：