看完这篇还不知道css固定和自适应可以小和尚要摆地摊了

前言

开篇

左右侧采用浮动中间采用margin-left 和 margin-right 方法。

中篇

利用绝对定位中间同样采用margin-left margin-right方法

续篇

负的margin

终篇

三列布局中间固定，其他两列自适应

前言

接上一篇的小徒弟继续说吧

上一篇小徒弟进入山门之后，又开始一段新的历练。

师傅（路人甲）+徒弟（路人乙）

路人甲：徒弟，你已经成长了，要学会自己去独立了。

路人乙:狮虎，有什么新的指示吗

路人甲:你学习了那么久了，知道如何实现两列固定，中间自适应的布局吗，实现不了就去摆地摊吧

开篇

小徒弟陷入了沉思，开始思考了一会

路人乙:我想想

第一种方式

左右侧采用浮动中间采用margin-left 和 margin-right 方法。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>两行固定中间自适应</title>
</head>
<style></style><body><div style="width:100%; margin:0 auto;"><div style="width:200px; float:right; background-color:#960">这是右侧的内容 路人甲</div><div style="width:150px; float:left; background:#6FF">这是左侧的内容 路人乙</div><div style="margin-left:150px;margin-right:200px; background-color:#9F3">中间内容，自适应宽度</div></div>
</body></html>

中篇

想了一会之后

路人乙:我想不出了狮虎狮虎可以提示一下吗

路人甲沉默了一会，还是按照你原来的想法做一下修改就好了

第二种方式

第二种：利用绝对定位中间同样采用margin-left margin-right方法

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>两行固定中间自适应</title>
</head>
<style>.left,.right {position: absolute;top: 0;width: 220px;height: 100%;}.left {left: 0;background-color: blue;}.right {right: 0;background-color: red;}.main {margin: 0 230px;height: 100%;}
</style><body><div class="left">路人甲</div><div class="right">歌谣</div><div class="main">路人乙</div>
</body></html>

续篇

路人乙想了一会

第三种方式负的margin

路人乙:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>两行固定中间自适应</title>
</head>
<style>#main {float: left;width: 100%;}#mainContainer {margin: 0 230px;height: 200px;background: green;}#left {float: left;margin-left: -100%;width: 230px;background: orange;height: 200px;}#right {float: left;margin-left: -230px;width: 230px;background: orange;height: 200px;}
</style><body><div id="main"><div id="mainContainer">main content</div></div><div id="left">left content</div><div id="right">right</div>
</body></html>

终篇

晚上小徒弟回去休息休息，又来了新的思路

可不可以实现三列布局中间固定，其他两列自适应呢

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>* {margin: 0;padding: 0;}#left {height: 300px;background: orange;float: left;width: 50%;position: relative;margin-left: -150px;}#right {height: 300px;background: orange;float: right;width: 50%;margin-left: -150px;}#center {width: 300px;height: 300px;background: green;float: left;position: relative;}</style>
</head><body><div id="left">我是路人甲</div><div id="center">我是歌谣</div><div id="right">我是路人乙</div></body></html>

想到这里小徒弟悠闲的进入了自己的梦乡，终于不要被赶出师门去摆地摊了。

我是歌谣一个沉迷于故事的讲述者。

本故事纯属虚构

欢迎一起交流一起进步

看完这篇还不知道css固定和自适应可以小和尚要摆地摊了相关推荐

第六十二期:看完这篇还不了解Nginx，那我就哭了！
看完这篇还不了解Nginx,那我就哭了! Nginx 同 Apache 一样都是一种 Web 服务器.基于 REST 架构风格,以统一资源描述符(Uniform Resources Identifie ...
图解 | 看完这篇还不懂高并发中的线程与线程池，你来打我！
来源 | 码农的荒岛求生头图 | 视觉中国一切要从CPU说起你可能会有疑问,讲多线程为什么要从CPU说起呢?原因很简单,在这里没有那些时髦的概念,你可以更加清晰的看清问题的本质. CPU并不知道 ...
看完这篇还不会Elasticsearch，我跪搓衣板，90%程序员已收藏
疯狂的肉丝面 2019-07-24 08:01:01 摘自:JaJian 51CTO技术栈编者说: 这篇可谓ES雄文,从概念到原理再到应用,还囊括了调优.强烈建议收藏. 生活中的数据搜索引擎是对数 ...
看完这篇还不会Elasticsearch，我跪搓衣板！
本文转载自:https://www.cnblogs.com/jajian/p/11223992.html 关于elasticsearch的深度好文. 生活中的数据搜索引擎是对数据的检索,所以我们先从 ...
看完这篇还不懂Redis的RDB持久化，你们来打我！
点击上方"方志朋",选择"设为星标" 回复"666"获取新整理的面试文章一.为什么需要持久化 redis里有10gb数据,突然停电或者意外 ...
看完这篇还不清楚Netty的内存管理，那我就哭了！
点击上方"朱小厮的博客",选择"设为星标" 后台回复"加群"加入公众号专属技术群说明在学习Netty的时候,ByteBuf随处可见,但是 ...
为什么子进程每次执行顺序不一样_看完这篇还不懂Redis的RDB持久化，你来打我...
推荐观看: Redis缓存穿透的终极解决方案,手写布隆过滤器_哔哩哔哩 (゜-゜)つロ干杯~-bilibiliwww.bilibili.com P8架构师串讲:Redis,zookeeper,ka ...
netty发送数据_看完这篇还不清楚Netty的内存管理，那我就哭了
说明在学习Netty的时候,ByteBuf随处可见,但是如何高效分配ByteBuf还是很复杂的,Netty的池化内存分配这块还是比较难的,很多人学习过,看过但是还是云里雾里的,本篇文章就是主要来讲解 ...
看完这篇还不懂 MySQL 主从复制，可以回家躺平了～
我们在平时工作中,使用最多的数据库就是 MySQL 了,随着业务的增加,如果单单靠一台服务器的话,负载过重,就容易造成宕机. 这样我们保存在 MySQL 数据库的数据就会丢失,那么该怎么解决呢? 其实 ...

看完这篇还不知道css固定和自适应可以小和尚要摆地摊了

前言

开篇

中篇

续篇

终篇

看完这篇还不知道css固定和自适应可以小和尚要摆地摊了相关推荐

最新文章

热门文章