html怎么让盒子并列_随笔

首先，我们定义ul li 定义出大盒子和三个小盒子，给他们添加合适的高度宽度，在li 的三个小盒子里添加 float: left使其浮动，再给他们添加margin-right，这样他们之间就有个间隔啦。

代码

<!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>

登录后复制

原本的浮动之后再设置外边距，外层盒子的宽度会不够导致最后一个盒子在第二排显示

为什么不显示？

原因：父元素：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>

登录后复制

但是使用 display：inline-block会出现一些情况，比如

欢迎分享，转载请注明来源：内存溢出

原文地址: https://outofmemory.cn/zaji/7401800.html

html怎么让盒子并列

发表评论

评论列表（0条）