CSS-布局2-中间固定两边自适应

最新推荐文章于 2021-11-28 12:04:45 发布

weixin_34414650

最新推荐文章于 2021-11-28 12:04:45 发布

阅读量159

点赞数

原文链接：https://yq.aliyun.com/articles/605555

版权

1、布局概述

中间固定，两边自适应布局，这是一种非常罕见的布局。例如下图，测试剧中，这几个字固定宽度，左右的红线根据屏幕自适应。

image.png

2、实现思路1- 浮动加负边距

实现思路
（1）创建左中右3个div。
（2）左边div各占50%宽度;左边div的左边负边距，设置为中间div宽度的一半。
（3）右边div各占50%宽度;右边div的右边负边距，设置为中间div宽度的一半。
源代码：

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>中间固定宽度，两边自适应布局-浮动加负边距</title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;

        }
        .wrap{
            overflow: hidden;
            margin-top: 20px;
        }
        .center{
           width: 70px;
           text-align: center;
           float: left;
     
        }
        .left{
            line-height: 30px;
            height: 30px;
            float: left;
            width: 50%;
            margin-left: -35px;
        }
        .right{
            line-height: 30px;
            height: 30px;
            float: right;
            width: 50%;
            margin-right: -35px;
        }
        hr{ height:1px;border:none;border-top:1px solid red;}
    </style>
</head>
<body>
    <div class="wrap">
        <div class="left">
            <hr style="margin-top: 14px;">
        </div>
        <div class="center">测试居中</div>
        <div class="right">
            <hr style="margin-top: 14px">
        </div>
    </div>
     
</body>
</html>

运行效果：

image.png

删除中间div后，运行效果：

image.png

3、实现思路2-弹性合作模型

实现思路:
（1）创建左中右3个div。
（2）设置负div为弹性盒子模型。
（3）设置左右div的flex-grow 为1 。
源代码：

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>中间固定宽度，两边自适应布局-弹性盒子模型</title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;

        }
        .wrap{
            display: flex;
            flex-direction: row;
            margin-top: 20px;
        }
        .center{
           width: 70px;
           text-align: center;

        }
        .left,.right{
            flex-grow: 1;
            line-height: 30px;
            height: 30px;
        }
        hr{ height:1px;border:none;border-top:1px solid red;}
    </style>
</head>
<body>
    <div class="wrap">
        <div class="left">
            <hr style="margin-top: 14px">
        </div>
        <div class="center">测试剧中</div>
        <div class="right">
            <hr style="margin-top: 14px">
        </div>
    </div>
     
</body>
</html>

4、实现类似显示效果。

如果只实现类似的显示效果。另外一种实现思路。
（1）设置div 的行高为1px。
（2）设置div 的左边框、右边框宽度为1px solid red;
（3 ）方案缺点：不能左右自动适应，只能应用固定宽度的需求。

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通过高度为1px,设置左右边框宽宽</title>
    <style type="text/css">
        .wrap{
            width: 500px;
        }
        .nav{
            text-align: center;
            border-left : 200px solid red;
            border-right: 200px solid red;
            line-height : 1px;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="nav">测试剧中</div>
    </div>
</body>
</html>

weixin_34414650

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS-布局2-中间固定两边自适应

1、布局概述中间固定，两边自适应布局，这是一种非常罕见的布局。例如下图，测试剧中，这几个字固定宽度，左右的红线根据屏幕自适应。image.png2、实现思路1- 浮动加负边距实现思路（1）创建左中右3个div。（2）左边div各占50%宽度;左边div的左边负边距，设置为中间div宽...
复制链接

扫一扫