html页面中表单怎么用div分列布局主要分两个步骤 *** 作：
第一种情况，float浮动相同
让两个div盒子的float值相同，比如都设置float:left或float:right，宽度设置合适即可。这里我们通过案例实现一行两列DIV布局。
1、完整实例DIV+CSS代码：
<!DOCTYPE html><html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8" />
<title>两个DIV并排</title>
<style>
.div-a{ float:leftwidth:49%border:1px solid #F00}
.div-b{ float:leftwidth:49%border:1px solid #000}
</style>
</head>
<body>
<div class="div-a">第一个DIV盒子</div>
<div class="div-b">第二个DIV盒子</div>
</body>
</html>
2、实例截图
一行两列DIV并排效果截图
需要注意是宽度，要想一行两列DIV布局，避免第三个DIV也并排，这里就要设置计算好宽度（这里设置百分比宽度为49%），三个DIV盒子宽度之和大于父级宽度，两个DIV宽度之和小于父级宽度，即可实现只有2个DIV并排。
第二种情况，float浮动值不同
一个设置为float:left一个设置为float:right.。
1、完整HTML源代码：
<!DOCTYPE html><html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8" />
<title>两个DIV并排</title>
<style>
.div-c{ float:leftwidth:49%border:1px solid #F00}
.div-d{ float:rightwidth:49%border:1px solid #000}
</style>
</head>
<body>
<div class="div-c">第三个DIV盒子</div>
<div class="div-d">第四个DIV盒子</div>
</body>
</html>
2、两列并排DIV实例截图
两种常用方法：
<p class="p_left">左左左左左左左</p><p class="p_right">右右右右右右右</p>。
一、
.p_left{float:left}。
.p_right{float:left}。
二、(中间如果有空格 他会留空格的 上面的就不会，你要块状也可以换成display:inline-block)。
.p_left{display:inline；}。
.p_right{display:inline}。
在界面设计的时候，经常需要将两个div在同一行显示。
如以下要将“第一个div”和“第二个div”显示在同一行：
<div id="id1"> /*外层div*/
<div id="id2" style="width:100pxheight:20px">第一个div</div>
<div id="id3" style="width:100pxheight:20px">第二个div</div>
</div>
只需要对id2和id3增加css样式即可，如下所示：
<div id="id1"> /*外层div*/
<div id="id2" style="width:100pxheight:20pxfloat:left">第一个div</div>
<div id="id3" style="width:100pxheight:20pxfloat:left">第二个div</div>
</div>
这样就可以了。
1、HTML布局主要有两种方式，一种是表格布局，一种是DIV布局。2、HTML表格布局是WEB1.0时代主要使用的布局方式，即使用TABLE标签进行布局，优点是布局比较简单。3、HTML DIV布局是WEB2.0时代主要使用的布局方式，优点是符合W3C标准，载入速度比较快，也比较便于做结构分离。4、现在一般都是提倡使用DIV布局，但也不是说就淘汰表格布局了，视具体的场景需要，在很多场景中都是两种混合使用的。5、希望对你有帮助。欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）