css之页面三列布局之左右两边宽度固定，中间自适应

左右两边宽度固定，中间自适应 

1. 左右两边绝对定位

2. 可以利用浮动，左边的左浮动，右边的右浮动

3. css3 flex布局(html http://www.cnblogs.com/myzy/p/5919814.html)

4. table布局

5. grid布局 (https://www.w3cplus.com/css3/line-base-placement-layout.html)

第一种方法：左右两边绝对定位

html代码

    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>

css代码

.left {
                height: 200px;
                width: 300px;
                background-color: blue;
                position: absolute;
                left: 0;
                top:0
            }
            .right {
                width:300px;
                height: 200px;
                background-color: red;
                position: absolute;
                right: 0;
                top:0;
            }
            .middle{
                height: 300px;
                background-color: yellow;
                margin: 0 300px;
            }

优点：快捷，不容易出问题

缺点：子元素也脱离的文档流，这样有效性就相对还说比较差

如果高度不固定， 两边的模块不会随中间的部分改变而改变

 第二种方法：可以利用浮动，左边的左浮动，右边的右浮动

css部分

       #left {
                width: 100px;
                float: left;
                background: green;
                height: 300px;
            }
            
            #right {
                width: 100px;
                float: right;
                background: red;
                height: 300px;
            }
            
            #middle {
                margin-right: 110px;
                margin-left: 110px;
                height: 300px;
                background: #ccc;
            }

html部分;

   <div id="left">
   </div>
   <div id="right">
   </div>
   <div id="middle">
   </div>

 

优点：兼容性好（处理好清除浮动，和周边元素的关系）

缺点:float后脱离文档流，处理不好会有很多问题，这个是这种排版的局限性。

如果高度不固定，不做修改，此方法不再好使，因为中间的部分会超出两边的部分。

第三种方法：css3 flex布局

css:

.content{    
    display:flex;
}
.left {
    height: 200px;
    width: 300px;
    background-color:red
}
.right {
    width:300px;
    height: 200px;
    background-color:blue;
}
.middle{
    height: 300px;
    background-color: yellow;
    flex:1;
}

html

<div class="content">
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>
</div>

优点：吸收了前面两个的优点

缺点：兼容性问题

如果高度不固定，两边的部分会随着中间部分变高。

第四种方法：table布局

css

.content{    
    display:table;
    width:100%;
    height: 100px;
}
.content>div{
  display: table-cell;
}
.left {
    height: 200px;
    width: 300px;
    background-color:red
}
.right {
    width:300px;
    height: 200px;
    background-color:blue;
}
.middle{
    height: 300px;
    background-color: yellow;
}

html:

<div class="content">
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>
</div>

优点：兼容性特别好，例如ie8

缺点：同时增高的高度

如果高度不固定，两边的部分会随着中间部分变高。

第五种方法：grid布局

css:

.content{    
    display:grid;
    width:100%;
    grid-template-rows:100px;
    grid-template-columns:300px auto 300px;
}

.left {
    height: 200px;
    width: 300px;
    background-color:red
}
.right {
    width:300px;
    height: 200px;
    background-color:blue;
}
.middle{
    height: 300px;
    background-color: yellow;
}

html

<div class="content">
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>
</div>

如果高度不固定，所有的模块不会所内容增加而变高

 

上下固定中间自适应解决办法：http://www.cnblogs.com/pigtail/archive/2012/11/25/2787508.html

转载于:https://www.cnblogs.com/myzy/p/6135047.html