时间:2021-05-08
解析四种常用方法以及原理:浮动、浮动内嵌 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>原理:
浮动内嵌 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>原理:
定位
<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>原理:
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>原理:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
CSS两列布局,右侧固定,左侧自适应宽度这是右侧的内容这是左侧的内容,自适应宽度CSS两列布局,左侧固定,右侧自适应宽度中间内容,自适应宽度CSS三列布局,左右
一、css实现左侧宽度固定右侧宽度自适应1、定位自适应*{padding:0;margin:0;}.left{background:red;width:200p
本文实例讲述了js实现简单的左右两边固定广告效果的方法。分享给大家供大家参考。具体分析如下:大多数网站都有左右两边的固定广告位,下面呢就是实现这个效果的最简单的
本文介绍了详解左右宽度固定中间自适应html布局解决方案,分享给大家,具体如下:a.使用浮动布局html结构如下leftrightcenter//此处注意要先渲
一.定宽+自适应期望效果:左侧宽度固定,右侧宽度自适应公共代码:html:leftmenurightitem1rightitem2rightitem3css:h