左右排版本来是可以这样实现的:两边都使用百分比,然后左右浮动。但是这样做满足不了下面这样的场景:
在一个文章页面里面,分为左边的正文区域和右边的与文章关联的其他信息区域,我想让正文区域能随着用户的显示屏宽度变化而变化,这似乎百分比就能做到,但是如果使用百分比,左右两边都必须有一个固定的比值,那样右边也会随着用户显示屏的宽度变化,如果用户的显示屏很宽,那这右边就显得似乎国语宽了,正文无论多款是无所谓的,但是侧边最好是一个固定值。
就像这种右图所示效果:
也就是说我需要一个左边自适应,而右边固定的左右布局,或者说某一边固定,另一边占据剩余部分,该如何做呢?
我找到的最好的答案是使用负margin(配合浮动),下面概括一下原理:可以500%提高开发效率的前端UI框架!
使用负margin可以使当前的div左边能容纳下面的div浮动上来,因此把右边的div摆在前面,左边的摆后面,右边的使用负margin就能让左边的浮上来,这样就遮住了右边的左半部分,只要右边再内部使用一个div,外左边距为左边的宽度就实现了左右的排版。
1、左边固定,右边自适应
(1)右边使用margin-left值为200(刚好是左边的宽度)的宽度,那么左边就刚好能浮动上来。为什么说浮动上来呢,因为如果没有这个margin: 0 0 0 -200px;由于右边的宽度是100%,因此左边肯定是排在下面的。
(2)左边虽然能浮动上来,但是右边和左边的内容是有重叠的
所以你还需要绿色部分的代码,右边再内部使用一个div,外左边距为左边的宽度
<div>
<div style="float: right; margin: 0 0 0 -200px; width: 100%;">
<div style="margin: 0 0 0 200px; background: #e4e4e4;">
这是右边部分
</div>
</div>
<div style="float: left; width: 200px; background: #669999">
这是左边部分
</div>
</div>
这个产生的效果如下图:(图片区域宽度固定的,但是文字是占据这个div的剩余部分,这里右边没有紧贴边框是因为父div有较大padding的原因没能挤满,不要受误导)。可以500%提高开发效率的前端UI框架!
提示:真正在实现的时候好像没必要左边必须写在后面,我试过,即使按从左到右书写也是可以的,但是很多大型网站都是反着写,我就按正规的来讲了。
2、右边固定,左边自适应
跟上一个最大的不同点就是,左右两个div容器的代码的前后位置换了,原因就是"float:rihgt"一定要在"float:left"前面。
<div> <div style="float: right; width: 200px; background: #669999"> 这是右边部分 </div> <div style="float: left; margin: 0 -200px 0 0; width: 100%;"> <div style="margin: 0 200px 0 0; background: #e4e4e4;"> 这是左边部分 </div> </div> </div>
3、左右各占一定百分比,这就简单了,把上面任意一种将200px改成比例值20%就实现了。
<div> <div style="float: right; margin: 0 0 0 -20%; width: 100%;"> <div style="margin: 0 0 0 20%; background: #e4e4e4;"> 这是右边部分 </div> </div> <div style="float: left; width: 20%; background: #669999"> 这是左边部分 </div> </div>
4、再加一栏,实现左中右三栏布局。这只要再加一栏,float为right的多空一些位置就行了。这里以按比例为例
<div> <div style="float: right; margin: 0 0 0 -40%; width: 100%;"> <div style="margin: 0 0 0 40%; background: #e4e4e4;"> 这是右边部分 </div> </div> <div style="float: left; width: 20%; background: #669999"> 这是左边部分 </div> <div style="float: left; width: 20%; background: #663333"> 这是中间部分 </div> </div>
5、实现框架页的效果(左右可分别出现滚动条,页面无滚动条):只要左右div各加position: absolute; overflow: scroll; height: 100%;左边再加left: 200px;即实现了,这里用了绝对定位,因此float属性可以干掉了。 可以500%提高开发效率的前端UI框架!
<div> <div style="margin: 0 0 0 -200px; width: 100%; position: absolute; overflow: scroll; height: 100%; left: 200px;"> <div style="margin: 0 0 0 200px; background: #e4e4e4;"> 这里是右边部分 </div> </div> <div style="width: 200px; background: #669999; position: absolute; overflow: scroll; height: 100%;"> 这是左边部分 </div> </div>
相关推荐
此demo运用margin负边距解决一些边框、间距问题
js鼠标悬停提示,支持边距自适应。 div+css+style。使用方便
国外关于使用负边距创建这类布局的技术文档,我看到的最早是04年 Ryan Brill 发表在 A List Apart 上的 《Creating Liquid Layouts with Negative Margins》 (04年 – -!国内刚小部分人开始关注WEB标准化),本文...
合理使用负边距技术,可以帮助我们创建很多有意思的布局,比如自适应浏览器宽度的流体布局。
本人查阅好多资料,上了N多网站,始终找不到关于Fastreport动态调整页边距的代码,现终于找到方法,共享出来,愿与各位菜鸟共享。希望对大家能有所帮助。好的资源大家一起共享。用fastreport 4.8.5调试通过。
自适应布局主要是浮动圣杯布局也叫双飞翼布局,主要是利用浮动和margin负边距实现的,希望大家能够很好的理解下面的几个例子,绝对定位布局也是非常的简单了
css兼容
在日常开发中,常常碰到一些布局的问题,让人头疼,来看看负边距的情况吧
Padding 属性用于设置 DIV 的内边距,格式和 Margin 属性相同。例如:<div style="padding:5px 10px 20px 30px;background-color:Black;width:500px;height:500px;"></div> Padding 属性可以分别设置四个边的距离:...
XML应用开发(软件品牌)-1期 4.9 课堂实践-使用CSS容器属性显示XML文档-边距属性margin和补白属性padding.doc 学习资料 复习资料 教学资源
XML应用开发(软件品牌)-1期 4.9 案例分析-使用CSS容器属性显示XML文档-边距属性margin和补白属性padding.doc 学习资料 复习资料 教学资源
三栏布局“左右宽度固定,中间自适应宽度” 方法1、设置浮动,使文档脱离文档流,注意层的顺序 方法2、同样通过负边距来实现,缺点是需要另外增加一个层 方法3、也可以通过绝对定位来实现
JavaScript 设置 Div 的 margin 参数 在 HTML 中,我们经常需要设置元素的样式,包括 margin 属性。margin 属性用于设置元素的外边距,而 JavaScript 可以帮助我们动态地设置元素的 margin 属性。 margin 属性可以...
Android TextView 去掉自适应默认的fontpadding的实现方法 最近在项目中使用textview时发现在使用Android:layout_height=”wrap_content”这个属性设置后,textview会有默认的padding,也就是fontpadding。这样就会...
安卓textview在设置文字对齐方式上,没有左右对齐,在不同手机适配上换行时,右边往往会出现不齐。此空间解决了。左右对齐的问题!
padding:5px 3px 4px /*上内边距为5像素,左右内边距为3像素,下内边距为4像素*/ 边距属性 CSS的边距属性包括“内边距”和“外边距”两种 内边距 外边距 外边距 内边距 外边距(margin) margin-top:上外边距; ...
对于所有设计师使用过的CSS概念,负边距作为最少讨论到的定位方式要记上一功。这就像是在线纹身-每个人都会做,但是没有人会谈论它。(It’s like an online taboo—everyone’s doing it, yet no one wants to talk...
易语言设置编辑框左右边距源码,设置编辑框左右边距