CSS 实现两边固定中间自适应

悠悠 2023-01-13 06:27 259阅读 0赞

1，flex 布局

.box{
    	height: 50px;
    	width: 100%;
        display: flex;
        justify-content: space-between;
      }
      .box1,.box3{
          flex: 0 0 200px;
          background: rgb(0, 255, 55);;
      }
      .box2{
          flex: 1;
          background-color: aqua
      }
    
    <div class="box">
    	<div class="box1"></div>
    	<div class="box2"></div>
    	<div class="box3"></div>
    </div>

2、定位

<style> .box0{ width: 100%;position: relative;height: 50px} .box4{ width: 200px;position: absolute;left: 0;top: 0;background-color: #00FFFF;height: 50px;} .box6{ width: 200px;position: absolute;right:0;top: 0;background-color: #00FFFF;height: 50px;} .box5{ height: 50px;} </style>
    <div class="box0">
    	<div class="box4"></div>
    	<div class="box5"></div>
    	<div class="box6"></div>
    </div>

3、浮动

<style> .boxx{ width: 100%;height: 50px;} .lf{ float: left;width: 200px;background-color: #00FFFF;height: 50px;} .rf{ float: right;width: 200px;background-color: #00FFFF;height: 50px;} .ce{ height: 50px;background-color: red;} </style>
    
    <div class="boxx">
    	<div class="lf"></div>
    	<div class="rf"></div>
    	<div class="ce"></div>
    	
    </div>

4、利用calc(100% - 400px)计算中间部分宽度,可以是 浮动或者第行内块

<style> .boxx{ width: 100%;height: 50px;} .lf,.rf{ display: inline-block;vertical-align: top;width: 200px;height: 50px;background-color: #00FFFF;} .ce{ display: inline-block;vertical-align: top;height: 50px;background-color: red;width:calc(100% - 400px);} </style>
    
    <div class="boxx">
    	<div class="lf"></div>
    	<div class="ce"></div>
    	<div class="rf"></div>
    </div>

5、利用margin

<style> .box{ padding: 0 200px; } .ce{ width: 100%; float: left; background-color: aqua; } .lf{ width: 200px; float: left; margin-left: -100%; position: relative; left: -200px; background-color: rgb(0, 255, 106); } .rf{ width: 200px; float: left; margin-left: -200px; position: relative; right: -200px; background-color: rgb(0, 255, 55); } </style>
    <div class="box">
    	<div class="lf"></div>
    	<div class="ce"></div>
    	<div class="rf"></div>
    </div>

发表评论取消回复

表情：

评论列表（有 0 条评论，259人围观）

还没有评论，来说两句吧...

相关阅读

相关如何用CSS实现左侧宽度固定，右侧自适应（两栏布局）？左右固定中间自适应（三栏布局）呢？

在前端日常布局中，会经常遇到左侧宽度固定，右侧自适应或者左右两边固定，中间部分自适应的实用场景。本文例子中将列举出两种常用的两栏布局，左侧固定右侧自适应的常用方法以及代码...

谁践踏了优雅/ 2024年04月24日 20:59/ 0 赞/ 83 阅读

相关 CSS之布局系列--三列布局(中间固定，两边自适应)--方法/实例

原文网址：[CSS之布局系列--三列布局--中间固定，两边自适应--方法/实例\_IT利刃出鞘的博客-CSDN博客][CSS_--_--_--_IT_-CSDN] 简介

今天药忘吃喽~/ 2023年10月02日 16:57/ 0 赞/ 8 阅读

相关 CSS之布局系列--三列布局(两边固定，中间自适应)--方法/实例

原文网址：[CSS之布局系列--三列布局(两边固定，中间自适应)--方法/实例\_IT利刃出鞘的博客-CSDN博客][CSS_--_--_IT_-CSDN] 简介本文

雨点打透心脏的1/2处/ 2023年10月02日 16:55/ 0 赞/ 10 阅读

相关 css实现上中下布局（上下固定，中间自适应）

先上效果图： ![在这里插入图片描述][20210421001710245.gif] 实现方法：方法一：这个最简单，利用css中vh单位和calc() 函数

深藏阁楼爱情的钟/ 2023年01月14日 14:58/ 0 赞/ 151 阅读

相关 CSS 实现两边固定中间自适应

1，flex 布局 .box{ height: 50px; width: 100%; display: flex;

悠悠/ 2023年01月13日 06:27/ 0 赞/ 260 阅读

相关自适应布局，完美解决左右两边固定大小，中间内容适应大小。

自适应布局，左右两边固定大小，中间内容适应大小 ![Center][] 如图所示，需要把上面的Chinese Cosmetic和更多

た入场券/ 2022年09月22日 11:55/ 0 赞/ 225 阅读

相关三栏布局——左右固定，中间自适应

之前有写过关于固定父布局，然后父布局内有是两列自适应。现在我们来看看三栏布局，当左右固定，中间的布适应是如何实现的。这里将介绍两种方法，一种是使用margin值，另

Dear 丶/ 2022年06月12日 01:45/ 0 赞/ 299 阅读

相关使用CSS实现三栏自适应布局（两边宽度固定，中间自适应）

所谓三列自适应布局指的是两边定宽，中间block宽度自适应。这道题在今年网易内推前端工程师面试的时候也被问到。我这里主要分为两大类，一类是基于position传统的实现，一类

淩亂°似流年/ 2022年06月07日 14:10/ 0 赞/ 339 阅读

相关 CSS中左右两块固定，中间自适应的简单实现

因为在面试中遇到过几次这样一个经典的问题，而且在自己实际开发过程中也遇到过这样的布局要求，所以在此做一个简单的记录,一般的需求场景为根据屏幕大小自适应的调整

素颜马尾好姑娘i/ 2021年11月29日 22:36/ 0 赞/ 257 阅读

相关中间文字，两边横线（纯css实现）

遇到了一个中间文字，两边横线的布局，效果如下图： ![在这里插入图片描述][20190813092908117.png] 第一种方法：使用了背景色和透明度，细心的人可能

系统管理员/ 2021年10月18日 20:44/ 0 赞/ 694 阅读