左右定宽，中间自适应，实现三列布局

左右定宽，中间自适应，实现三列布局

今天想说的是一个左右定宽，中间自适应，实现三列布局，我也总结了以下，主要有以下几种：
废话不多说，直接上代码：

第一种：float

<!--html--> 
<div id="left"><span>left</span></div> 
<div id="right"><span>right</span></div> 
<div id="middle"><span>middle</span></div>

//css 
#left{ 
    float: left; 
    background-color: red; 
    width: 150px; 
    height: 50px; 
} 
#right { 
    float: right; 
    background-color: yellow; 
    width: 200px; 
    height: 50px; 
} 
#middle { 
    margin: 0 200px 0 150px; 
    width: 100%; 
    background-color: #fff9ca; 
    height: 50px; 
}

第二种：BFC

<!--html--> 
<div id="left"><span>left</span></div> 
<div id="right"><span>right</span></div> 
<div id="middle"><span>middle</span></div>

//css 
#left { 
    background-color: red; 
    width: 150px; 
    height: 50px; 
    float: left; 
} 
#right { 
    background-color: yellow; 
    width: 200px; 
    height: 50px; 
    float: right; 
} 
#middle { 
    background-color: #fff9ca; 
    height: 50px; 
    overflow: hidden; 
}

第三种：双飞翼布局

<!--html--> 
<div class="grid"> 
    <div id="middle"> 
        <div id="middle-span"><span>middle</span></div> 
    </div> 
    <div id="left"><span>left</span></div> 
    <div id="right"><span>right</span></div> 
</div>

//css 
#middle { 
    float: left; 
    background-color: #fff9ca; 
    width: 100%; 
    height: 50px; 
} 

#middle-span { 
    margin: 0 200px 0 150px; 
} 

#left { 
    float: left; 
    position: relative; 
    background-color: red; 
    width: 150px; 
    margin-left: -100%; 
    height: 50px; 

} 

#right { 
    float: left; 
    position: relative; 
    background-color: yellow; 
    width: 200px; 
    margin-left: -200px; 
    height: 50px; 
}

第四种：flex

<!--html--> 
<div class="flex"> 
    <div id="left"><span>left</span></div> 
    <div id="middle"><span>middle</span></div> 
    <div id="right"><span>right</span></div> 
</div>

//css 
        .flex { 
            display: flex; 
            flex-flow: row; 
        } 

        #left { 
            background-color: red; 
            width: 150px; 
            height: 50px; 
        } 

        #middle { 
            background-color: #fff9ca; 
            flex: 1; /* flex中宽度自适应使用该属性，使用100%时其他列的固定宽度会出现问题*/ 
            height: 50px; 
        } 

        #right { 
            background-color: yellow; 
            width: 200px; 
            height: 50px; 
        }

本文名称：左右定宽，中间自适应，实现三列布局
分享地址：/news35/160835.html

成都网站建设公司_创新互联，为您提供搜索引擎优化、定制开发、外贸建站、电子商务、网站收录、关键词优化

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联