假设高度已知,左右宽度固定,中间自适应的几种方案

分类: HTML5 作者: 浏览:174 时间:2019年4月27日 23:37 评论:0

在网上看到这样一个问题,你能想出几种方案,我们很容易就会想到float, position,flex,然后绞尽脑汁再也想不出来了,现在记录下来

第一种方案: float

<section class="layout float">  
    <div  class="left"></div>  
    <div class="right"></div>  
    <div class="center">  
        <h1>浮动解决方案</h1>  
    </div>  
</section>  
.left {  
width: 300px;  
    background-color: red;  
}  
.right {  
    width: 300px;  
    background-color: blue;  
}  
.float .left {  
    float: left;  
}  
.float .right {  
    float: right;  
}  
section.layout div {  
    min-height: 100px;  
}  
.center {  
    background-color: yellow;  
}  

第二种方案: position

<section class="layout position">  
    <div class="right"></div>  
    <div class="left"></div>  
    <div class="center">  
        <h1>绝对定位解决方案</h1>  
    </div>  
</section>  
section.position {  
    position: relative;  
}  

section.position .left {  
    position: absolute;  
    left: 0;  
}  

section.position .right {  
    position: absolute;  
    right: 0;  
}  

section.position .center {  
    margin-left: 300px;  
    margin-right: 300px;  
}  
赞(11)

评论(0)

  • 暂无评论