html中如果建了两个水平盒子,再想在两个盒子下面建一个盒子怎么办?

用一个div将上面的两个盒子包起来,然后下面再写一个div就可以啦,如:

<div style=”overflow:hidden”>

<div style=”float:left;”>左</div>

<div style=”float:right;”>右</div>

</div>

<div>下</div>

html用div分成左中右三个盒子,然后在中间的盒子加两个盒子,怎么才能

<!doctype html>

<html>

<head>

<meta charset=”utf-8″>

<title>div5px</title>

<style type=”text/css”>

div li{ float:left; width:33.3%; background:#063; height:30px; padding:0; margin:0; list-style:none; height:100px;}

.bg{ background:#0C9; width:100%; height:50px; padding:0; margin:0;}

</style>

<!–直接用li将div分为一块,再向li里面再次放入两个div,也可以使用dl,dt,dd,可以找一下10天学会div+css(直接百度)的教程看(深圳网站建设:)–>

</head>

 

<body>

  <div>

     <li style=”background:#066;”></li>

     <li>  

         <div class=”bg”></div>

         <div class=”bg” style=”background:#0CC;”></div>

     </li>

     <li style=”background:#066;”></li>

  </div>

</body>

</html>

html怎么让盒子并列

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

代码

<!DOCTYPE html> <html> <head> <meta charset=”UTF-8″> <title>三个盒子</title> <style> *{ margin: 0; padding: 0; list-style: none; } ul{ background: #ededed; height: 300px; width: 640px; margin: 0 auto; } ul li{ background: #fff; box-sizing: border-box; border: 1px solid #333; height: 300px; width: 200px; float: left; margin-right: 20px; } ul li:last-child{ margin-right: 0px; } ul li p{ text-align: center; } ul li span{ display: block; font-size: 14px; text-align: center; color: #e08c35; font-weight: bold; } </style> </head> <body> <ul> <li> <img src=”/data/upload/help/202210/22/af9e150d65e9dd79913e80302291b243.jpg” alt=”” width=”200″ height=”200″> <p>薯味博饼280g</p><br> <span>超值价¥9.9</span> </li> <li> <img src=”/data/upload/help/202210/22/71bf877f69742dadfb4786ff92fa2035.png” alt=”” width=”200″ height=”200″> <p>铝制洗涤用衣架</p><br> <span>超值价¥9.9</span> </li> <li> <img src=”/data/upload/help/202210/22/75e925c98dc17cb176eb8b7e77b87e0d.png” alt=”” width=”200″ height=”200″> <p>男/女轻弹云朵家居鞋</p><br> <span>超值价¥9.9</span> </li> </ul> </body> </html>