三行并列_html/css_WEB-ITnose-html教程-PHP中文网

三行并列_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 11:50:03

原创

1531人浏览过

1 <div class="content">2     <div class="left"></div>3     <div class="center"></div>4     <div class="right"></div>5 </div>

登录后复制

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

行者AI

行者AI绘图创作，唤醒新的灵感，创造更多可能

100

查看详情

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负值会出现明显的移动，故此法不作推荐。

立即学习“前端免费学习笔记（深入）”；