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

2022-05-30    分类: 网站建设

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

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

第一种: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; 
        }

本文名称:左右定宽,中间自适应,实现三列布局
分享地址:https://www.cdcxhl.com/news35/160835.html

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

广告

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

成都app开发公司