css 实现 两端固定宽度,中间元素自适应

css 实现 两端固定宽度,中间元素自适应

在这篇文章中,我们通过几种不同的方法实现该功能,效果图如下:
在这里插入图片描述

一、使用flex实现

<!DOCTYPE html>
<html>
<head>
<style>
 
.box_container {
    width: 600px;
    height: 80px;
    background-color: yellow;
    display: flex;
}
 
.box_left {
    width: 150px;
    height: 80px;
    background-color: red;    
}
 
 
.box_center {
height: 80px;
    background-color: blue;
    flex: 1;
}
 
 
.box_right {
    width: 200px;
    height: 80px;
    background-color: green;
}

</style>
</head>
 
<body>
 
<div class="box_container">
    <div class="box_left">left</div>
    <div class="box_center">center</div>
    <div class="box_right">right</div>
</div>
 
</body>
</html>

解析:
(1)父元素定义为display: flex, 弹性布局是2009年w3c提出的一种新的方案布局, 功能简便强大。如不熟悉,请前往学习

(2)flex = 1; flex是flex-grow, flex-shrink, flex-basis的缩写。flex=1, 等同于 flex-grow=1, flex-shrink=1, flex-basic=0%; 常用于以下情况:当元素的空间小于父节点空间,设置了flex:1的元素会得到剩余的宽度,因为flex-grow=1发挥了作用。

二、使用position和margin实现

.box_container {
    width: 600px;
    height: 80px;
    background-color: yellow;
    position: relative;
}
 
.box_left {
    width: 150px;
    height: 80px;
    background-color: red;
    
    position: absolute;
    left: 0;
    top: 0;  
}
 
.box_center {
    height: 80px;
    background-color: blue;
    margin: 0  200px   0  150px;
}
 
.box_right {
    width: 200px;
    height: 80px;
    background-color: green;
    
    position: absolute;
    right: 0;
    top: 0;
}
 
 
<div class="box_container">
    <div class="box_left">left</div>
    <div class="box_center">center</div>
    <div class="box_right">right</div>
</div>

解析:
(1)左右两端的position设置absolute时,脱离标准流的约束,标准流是向下添加元素的,脱离标准流就可以使目标元素位于同一行上。

(2)左端元素:left=0;top:0, 对齐父节点的左上角

(3)右端元素:right:0, top:0, 对齐父节点的右上角。

(4)中间元素需要减去左右元素占用的空间,故使用margin定义左右元素的宽度。 margin: 0 200px 0 150px;分别是上右下左的margin. 特别注意,如果不使用margin减去左右元素的空间,那么中间元素会占用整个父节点的空间。

(5)center元素可以定义在任意位置,不需要放在最后定义,使用比较灵活。

三、使用float和margin实现

.box_container {
    width: 600px;
    height: 80px;
    background-color: yellow;
}
 
.box_left {
    width: 150px;
    height: 80px;
    background-color: red;
    
    float: left;
}
 
.box_center {
    height: 80px;
    background-color: blue;
    margin: 0 200px 0 150px;
}
 
 
.box_right {
    width: 200px;
    height: 80px;
    background-color: green;
    
    float: right;
}
 
<div class="box_container">
    <div class="box_left">left</div>
    <div class="box_right">right</div>
    <div class="box_center">center</div>
</div>

解析:
(1)左右元素是浮云的,中间的元素必须添加在左右元素后面,否则将显示在下一行,这也是使用float的缺点所在。

(2)使用margin来减去左右元素的宽度,就可以确定中间节点的宽度。

四、float 双飞翼布局

双飞翼布局是很久以前淘宝提出一种三栏布局的优化方案,目的是为了中间元素优化显示,因为浏览器渲染引擎在构建和渲染结构树是异步的,故将中间节点优先定义。
这里参考大神的文章

.box_container {
    width: 600px;
    height: 80px;
    background-color: yellow;
}
 
.box_left {
    width: 150px;
    height: 80px;
    background-color: red;
    
    float: left;
    margin-left: -100%;
    
}
 
.box_center_wrap {
    width: 100%;
    height: 80px;
    float: left;
}
 
.box_center_item {
    height: 80px;
    background-color: blue;
    margin: 0 200px 0 150px;
}
 
 
.box_right {
    width: 200px;
    height: 80px;
    background-color: green;
    
    float: left;
    margin-left: -200px;
}
 
<div class="box_container">
<div class="box_center_wrap">
            <div class="box_center_item">center</div>
    </div>
    <div class="box_left">left</div>
    <div class="box_right">right</div>
</div>

解析:
(1)优先定义中间元素,box_center_wrap占用整个父节点空间,box_center_item是定义的子节点的 margin。从结构树中看,渲染时优先渲染中间元素节点,在某种场合有重要的用途。

(2)左右节点都定义为float浮动布局,如果在不定义margin的情况下,这两个元素都会显示在新的一行中。

(3)margin为负数是很多场合都会使用,margin-left 为负数,div向左移动,向左位置不够则向上移动,改变行的位置。

(4) 左元素margin-left: -100%; 是指减去父节点的宽度,那么左元素直接定义到父节点的最左端。

(5)右元素margin-left: -200px; 是指减去自身的宽度,那么右元素定位是父节点的右端。

(6)优点:优先渲染中间节点,支持各种宽高变化,通用性强。缺点:结构层增加,增加树的计算量。

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值