时间:2021-07-01 10:21:17 帮助过:25人阅读
12 3 4 5
1 body{margin:0;padding:0;}2 .content div{3 width:100px;4 height:100px;5 background:rgb(147,172,213);6 margin:10px;7 }
方法一:float
1 .content div{float:left;}
三个div一起浮动,浮动元素无外边距合并问题,故center左右margin都是20px。
方法二:绝对定位
1 .content {position:relative;}2 .content div{position:absolute;}3 div.center{top:0;left:110px;}4 div.right{top:0;left:220px;}
设置父元素为relative,被定位的子元素为absolute,绝对定位不占位空间,所以此时三个元素会重叠于父元素的顶点,再用top,left布局左右margin10px。
方法三:inline-block
1 .content div{display:inline-block;}
将其变为行内块元素,但是这样div之间会有额外间距,且兼容问题较多。
方法四:margin负值
1 div.center{2 margin-left:120px;/*100+10*2=120px 以下数值都以center左右margin为10px考虑*/3 margin-top:-110px;/*100+10=110px 要想用margin-top实现上移,则其值为负*/4 }5 div.right{6 margin-left:230px;/*100*2+10*3=230px*/7 margin-top:-110px;/*当center上去之后,原占位空间不存在,right上移,故再移动需要的高度与center一致为100+10=110px。而如果先写right,margin-top就应该上移(100+10)*2=220px*/8 }
在网速较慢或者高频率刷新时,使用margin负值会出现明显的移动,故此法不作推荐。