html固定中心,css 两边固定中间自适应布局的实现
解析四种常用方法以及原理:浮动、浮动内嵌 div、定位、flex。
浮动
.wrap {background: #eee; padding: 20px; }
p {margin: 0; }
.left {width: 200px; height: 200px; float: left; background: coral; }
.right {width: 200px; height: 200px; float: right; background: lightblue; }
.middle {margin: 0 200px; background: lightpink; }
我在左边
我在右边
我排最后,但是跑到中间来了
原理:
浮动元素和非浮动元素不在同一个立体空间,如果不清浮动,位置在它下面的元素将往上浮。
浮动元素高度为0,浮动盒子层级比 block 块级水平盒子高,比 inline/inline-block 水平盒子低。
浮动内嵌 div
.wrap {background: #eee; padding: 20px; }
p {margin: 0; }
.left {width: 200px; height: 200px; float: left; background: coral; margin-left: -100%;}
.right {width: 200px; height: 200px; float: left; background: lightblue; margin-left: -200px;}
.middle {width: 100%; height: 200px;float: left; background: lightpink; }
span{
display: inline-block;
margin: 0 200px;
}
我在中间
我在左边
我在右边
原理:
三个元素都浮动,其中主题元素沾满一行 100% ,利用负 margin 把左右两边的元素放好。
主题元素里面再套一个子元素,子元素 margin: 0 200px ,防止内容跑到左右两块浮动元素下面被遮盖。
定位
.wrap {background: #eee; position: relative;}
p {margin: 0; }
.left {width: 200px; height: 200px; background: coral; position: absolute;left: 0; top: 0;}
.right {width: 200px; height: 200px; background: lightblue; position: absolute;right: 0; top: 0;}
.middle {height: 200px; background: lightpink; margin: 0 200px;}
我在中间,我用 margin 抵消左右两块定位元素占据空间
我在左边,我是定位元素
我在右边,我是定位元素
原理:
左右两个元素定位,可放任意位置。
中间元素用 margin: 0 200px,防止内容跑到左右两块定位元素下面被遮盖。
flex
.wrap {background: #eee; display: flex}
p {margin: 0; }
.left {width: 200px; height: 200px; background: coral; }
.right {width: 200px; height: 200px; background: lightblue; }
.middle {height: 200px; background: lightpink; flex: 1;}
我在左边
我在中间,flex: 1 自动占据剩余空间
我在右边
原理:
flex 布局,子元素默认水平排列。
flex: 0 1 auto -> 默认,占据空间不跟随父级放大,跟随变小,自身本来宽度
flex: 1 1 auto -> auto,占据空间跟随父级放大,同时跟随变小,自身本来宽度
flex: 0 0 auto -> none,占据空间不跟随父级放大,同时也不跟随变小,自身本来宽度
flex: 1 1 1 -> auto,占据空间跟随父级放大,同时跟随变小,并且自动占满剩余空间
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持免费资源网。
html固定中心,css 两边固定中间自适应布局的实现相关推荐
- 三列布局-中间固定俩边自适应-和两边固定中间自适应布局
中间固定俩边自适应 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8" ...
- div css左边固定右边自适应布局
web前端开发之布局:先看效果图,最简单的左右布局.有可能还会被面试问道哈哈哈.一看也没什么特别之处,就是左边固定,右边自适应,就这么简单. 原理:通过设置一个margin-left;或者margin ...
- css什么是自适应布局,CSS中常见的自适应布局是什么
CSS中常见的自适应布局是什么 发布时间:2020-12-05 13:24:07 来源:亿速云 阅读:102 作者:小新 这篇文章主要介绍CSS中常见的自适应布局是什么,文中介绍的非常详细,具有一定的 ...
- 中间固定两边自适应 两边固定中间自适应 promise
中间固定两边自适应 www.jianshu.com/p/94666c389- 两边固定中间自适应 思路 1.浮动 左浮动, 右浮动固定宽,中间的盒子设置左margin (左浮动盒子的宽度) 右marg ...
- css浮动布局自适应,CSS 几种常用自适应布局
通过阅读和实践,我对几种常用的布局样式有了一定的了解,也稍微总结了一下原理,若有不对请大家纠错.谢谢 我理解的[两列布局]左边固定和右边自适应,或者右边固定左边自适应的原理是: 1.设置固定区域的宽度 ...
- 使用CSS实现三栏自适应布局(两边宽度固定,中间自适应)
所谓三列自适应布局指的是两边定宽,中间block宽度自适应.这里主要分为两大类,一类是基于position传统的实现,一类是基于css3新特性弹性盒模型布局实现. 1. 基于传统的position和m ...
- rem css calc,关于使用rem单位、css函数calc()进行自适应布局
一.关于css中的单位 大家都知道在css中的单位,一般都包括有px,%,em等单位,另外css3新增加一个单位rem. 其中px,%等单位平时在传统布局当中使用的比较频繁,大家也比较熟悉,不过px单 ...
- CSS 负边距自适应布局
单列定宽单列自适应布局: <!DOCTYPE HTML> <html> <head><meta charset="UTF-8">&l ...
- css如何截取两边留中间,css 布局:两边固定中间自适应
解析四种常用方法以及原理:浮动.浮动内嵌 div.定位.flex. 浮动 .wrap {background: #eee; padding: 20px; } p {margin: 0; } .left ...
最新文章
- mysql中 课程1比课程2成绩高_小菜菜mysql练习解读分析1——查询 01 课程比 02 课程成绩高的学生的信息及课程分数......
- 理解mipi协议【转】
- MATLAB支持向量机SVM代码实现
- python中的位置怎么看_如何知道项目在Python有序字典中的位置
- JAVA面试题(part3)--if条件语句
- asp.net 使用Master模板页需要注意
- 调用gensim库训练word2vec词向量
- 阿里平头哥科学家亲述 RISC-V 2019 Summit 十大心得!
- 在Java中实现在线语音识别
- hrjava项目原型html_产品入门|什么是原型图设计?
- linux 下 ethtool 修改网卡eeprom
- 千方百剂创建账套服务器文件,千方百剂各工具使用.doc
- 5个必看的Docker视频
- 优美诗词(持续更新)
- 网络技术——路由器及其配置
- LVM精简卷(Thinly-Provisioned Logical Volumes)的扩容
- uq mysql_MySQL workbench中的PK,NN,UQ,BIN,UN,ZF,AI说明
- Eagle设计师必备利器管理工具
- OpenCV:imwrite存储图像后为全黑
- Linux:chmod命令
热门文章
- linux 打包 tar
- C 语言 链表的创建与打印
- python 递归方式实现斐波那契数列
- 126. Leetcode 剑指 Offer 46. 把数字翻译成字符串 (动态规划- 字符串系列)
- 54. Leetcode 113. 路径总和 II (二叉树-二叉树路径和)
- 不包含本位置值的累乘数组
- 报错整理:ImportError: cannot import name ‘mean_absolute_percentage_error‘ from ‘sklearn.metrics‘
- 错误解决 :Microsoft Visual C++ 14.0 is require Microsoft Visual C++ Builder 包丢失或者损坏
- 使用FP-growth算法发现频繁项集
- TensorFlow官方入门实操课程-一个神经元的网络(线性曲线预测)