解析四种常用方法以及原理:浮动、浮动内嵌 div、定位、flex。
浮动
<style type="text/css"> .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; } </style> <div class="wrap"> <p class="left">我在左边</p> <p class="right">我在右边</p> <p class="middle">我排最后,但是跑到中间来了</p> </div>
原理:
block
块级水平盒子高,比 inline/inline-block
水平盒子低。浮动内嵌 div
<style type="text/css"> .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; } </style> <div class="wrap"> <p class="middle"> <span class="inner"> 我在中间 </span> </p> <p class="left">我在左边</p> <p class="right">我在右边</p> </div>
原理:
margin
把左右两边的元素放好。margin: 0 200px
,防止内容跑到左右两块浮动元素下面被遮盖。定位
<style type="text/css"> .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;} </style> <div class="wrap"> <p class="middle">我在中间,我用 margin 抵消左右两块定位元素占据空间</p> <p class="left">我在左边,我是定位元素</p> <p class="right">我在右边,我是定位元素</p> </div>
原理:
margin: 0 200px
,防止内容跑到左右两块定位元素下面被遮盖。flex
<style type="text/css"> .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;} </style> <div class="wrap"> <p class="left">我在左边</p> <p class="middle">我在中间,flex: 1 自动占据剩余空间</p> <p class="right">我在右边</p> </div>
原理:
flex
布局,子元素默认水平排列。flex: 0 1 auto
-> 默认,占据空间不跟随父级放大,跟随变小,自身本来宽度flex: 1 1 auto
-> auto,占据空间跟随父级放大,同时跟随变小,自身本来宽度flex: 0 0 auto
-> none,占据空间不跟随父级放大,同时也不跟随变小,自身本来宽度flex: 1 1 1
-> auto,占据空间跟随父级放大,同时跟随变小,并且自动占满剩余空间以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
最近做移动端页面时,经常会用到inline-block元素来布局,但无可避免都会遇到一...
UCenter Home是Comsenz公司发布的一款SNS建站系统,目前最新版本是1.5。下面笔者...
常见的网页制作工具如DreamWeaver中都有这项功能,使用模板就能减少大量的重复劳...
这是 JS 原生方法原理探究系列的第三篇文章。本文会介绍如何模拟实现 new 操作符...
IE8 将具有 多种兼容模式 。IE平台建筑师Chris Wilson在博客中写到,IE平台的工...
简介: 近日,智能数据库和DAS团队研发的智能调参ResTune系统论文被SIGMOD 2021...
简介 做展示类项目的时候,通常要实现一些圆形选择的效果。这个借助 css 的 rota...
1.怎知我用一转身离开的你,竟要用一辈子来忘记。 2.有的故事,从一开始,就注...
当接到这个需求的时候,百度到业界关于主题切换的方案还挺多的,css链接替换、cl...
缘起 由于项目需要,我们要在web端实现录音功能。一开始,找到的方案有两个,一...