代码
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>三个盒子</title><style>*{ margin: 0padding: 0list-style: none} ul{ background: #edededheight: 300pxwidth: 640pxmargin: 0 auto} ul li{ background: #fffbox-sizing: border-boxborder: 1px solid #333height: 300pxwidth: 200pxfloat: leftmargin-right: 20px} ul li:last-child{ margin-right: 0px} ul li p{ text-align: center} ul li span{ display: blockfont-size: 14pxtext-align: centercolor: #e08c35font-weight: bold} </style></head><body><ul><li><img src="./imge/饼干.jpg" alt="" width="200" height="200"><p>薯味博饼280g</p><br><span>超值价￥9.9</span></li><li><img src="./imge/衣架.png" alt="" width="200" height="200"><p>铝制洗涤用衣架</p><br><span>超值价￥9.9</span></li><li><img src="./imge/拖鞋.png" alt="" width="200" height="200"><p>男/女轻d云朵家居鞋</p><br><span>超值价￥9.9</span></li></ul></body></html>
div盒子并排显示在各大网页中是很寻常的页面效果，但是实现这种效果的方法确不止一种方法一：使用float
.father{
width: 660px
height: 150px
margin: 0 auto
border: 2px solid red
overflow: hidden
}
.son{
width: 150px
height: 150px
float: left
text-align: center
line-height: 150px
margin-right: 20px
}
.last{
margin-right: 0
}
<div class="father">
<div class="son" style="background-color: pink">son1</div>
<div class="son" style="background-color: rebeccapurple">son2</div>
<div class="son" style="background-color: sandybrown">son3</div>
<div class="son last" style="background-color: slategrey">son4</div>
</div>
登录后复制
原本的浮动之后再设置外边距，外层盒子的宽度会不够导致最后一个盒子在第二排显示
为什么不显示？
原因：父元素：660px <150px4 + 20px4 = 680px
因此还需要再重新定义最后一个盒子的右外边距为0
方法二：使用 display：inline-block
.father{
width: 660px
height: 150px
margin: 0 auto
border: 2px solid red
font-size: 0
}
.son{
width: 150px
height: 150px
display: inline-block
*display: inline
*zoom: 1
text-align: center
line-height: 150px
margin-right: 20px
font-size: 14px
}
.last{
margin-right: 0
}
<div class="father">
<div class="son" style="background-color: pink">son1</div>
<div class="son" style="background-color: rebeccapurple">son2</div>
<div class="son" style="background-color: sandybrown">son3</div>
<div class="son last" style="background-color: slategrey">son4</div>
</div>
登录后复制
但是使用 display：inline-block会出现一些情况，比如
需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的<body>标签中，输入html代码：。
<div style="border: 1px solid blueposition:relativewidth: 200pxheight: 80px">
<div style="border: 1px solid bluetop: 19pxleft: 49pxposition:absolutewidth: 100pxheight: 40px"></div>
</div>
3、浏览器运行index.html页面，此时一个盒子放在了另一个盒子的正中央。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）