HTML如何并列div？求详细解答_随笔

以下是具体演示步骤：1、打开一个HTML文件编辑器。先在里面输入HTML的基本元素。2、在body标签里添加一个大div来容纳并列的div。3、在大div里添加想要并列的div元素，并在style属性里添加float：left即可4、运行结果如下图。无论如何变换浏览器宽度，div都是一行展示出来。

首先，我们定义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">薯味博饼280g 超值价￥9.9</li><li><img src="./imge/衣架.png" alt="" width="200" height="200">铝制洗涤用衣架 超值价￥9.9</li><li><img src="./imge/拖鞋.png" alt="" width="200" height="200">男/女轻d云朵家居鞋 超值价￥9.9</li></ul></body></html>

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

原文地址: http://outofmemory.cn/zaji/6198457.html

HTML如何并列div？求详细解答

发表评论

评论列表（0条）