html怎么让盒子并列

html-css011

html怎么让盒子并列,第1张

首先，我们定义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>男/女轻弹云朵家居鞋</p><br><span>超值价￥9.9</span></li></ul></body></html>

方法很多

1.用table表格实现，处理一下border格式就可以了

2.写两个div标签，每个div标签占用一行，每个div标签里划分为width相等的小div保证上下可以对其，小div里写标签就ok

3. 一个大div，width设置为固定，然后自动换行，当里面的小标签数量够多超出最大width的时候就会自动在第二行显示

4.FLEX布局了解一下？

最后，手机打字懒得写代码验证了，提供上面一些思路

在HTML中让两个div并排显示，通常情况下有三种实现方式，包括:

（1）设置为行内样式，display:inline-block

（2）设置float浮动

（3）设置position定位属性为absolute

以下为三种方式的具体实现代码：

1、设置每个div的展现属性为行内样式，示例代码为：

<div class="app">

<div style="display:inline-blockbackground:#f00">div1</div>

<div style="display:inline-blockbackground:#0f0margin-left:10px">div2</div>

</div>

2、设置float浮动，示例代码为：

<div class="app">

<div style="float:leftbackground:#f00">div1</div>

<div style="float:leftbackground:#0f0margin-left:10px">div2</div>

</div>

3、设置position定位属性为absolute, 示例代码为：

<div class="app">

<div style="position: absolutewidth:100pxbackground:#f00">div1</div>

<div style="position: absoluteleft:100pxbackground:#0f0margin-left:10px">div2</div>

</div>

扩展资料：

css清除浮动方法

（1）添加新的元素 、应用 clear：both

.clear {

clear: both 

height: 0

height: 0

overflow: hidden

}

（2）父级div定义 overflow: auto

.over-flow {

overflow: auto

zoom: 1//处理兼容性问题

}

（3）伪类  :after 方法  outer是父div的样式

.outer { zoom:1}    /*==for IE6/7 Maxthon2==*/

.outer :after {

clear:both

content:'.'

display:block

width: 0

height: 0

visibility:hidden

}

参考资料来源：CSS官方文档：css-float

参考资料来源：CSS官方文档：css-Positioning