html 三列布局(两列固定宽度,一列自适应)

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

不多说,先上代码:

<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标签里面,三个盒子在文档流里面正常的顺序是,左右中,为什么是这样呢?为什么不是左中右呢?
  这里就涉及到文档流的问题,如果是左中右的文档流,会出问题:左盒子向左浮动,脱离文档流,中盒子占据左盒子的位置,在文档流中,右盒子本来在文档流的位置会因为是块级元素,会放在中盒子的下面一行,再右浮动,就变成这样了:
html 三列布局(两列固定宽度,一列自适应)_第1张图片
  所以,需要把三个盒子按照左右中来放入文档流,这样左右两个盒子都先浮动脱离文档流了,中盒子就会占据左右盒子的位置,设置好合适的margin就可以实现这样的效果:
html 三列布局(两列固定宽度,一列自适应)_第2张图片

参考:这篇博客



<完>

你可能感兴趣的:(html)