比如
<div style="widht:500px">
<div style="float:leftwidth:200px">左</div>
<div style="float:leftwidth:200px">右</div>
</div>
这样,这个两个DIV标签就在同一行上了(同时靠左),当然有个前提,就是他们俩的父元素的宽度要至少大于400px,这样才能在同一行上。这个结果是两个DIV的右侧会空出100PX的空白
<div style="widht:500px">
<div style="float:leftwidth:200px">左</div>
<div style="float:rightwidth:200px">右</div>
</div>
以上写法,也是在同一行。不同的是,一个靠左,一个靠右。
这里边的两个DIV的中间有100PX的空白。
方法很多1.用table表格实现,处理一下border格式就可以了
2.写两个div标签,每个div标签占用一行,每个div标签里划分为width相等的小div保证上下可以对其,小div里写标签就ok
3. 一个大div,width设置为固定,然后自动换行,当里面的小标签数量够多超出最大width的时候就会自动在第二行显示
4.FLEX布局了解一下?
最后,手机打字懒得写代码验证了,提供上面一些思路
首先,我们定义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>
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)