html布局,下面怎么使两个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:100px;height:20px;">第一个div</div>
<div id="id3" style="width:100px;height:20px;">第二个div</div>
</div>
只需要对id2和id3增加css样式即可,如下所示:
<div id="id1"> /*外层div*/
<div id="id2" style="width:100px;height:20px;float:left;">第一个div</div>
<div id="id3" style="width:100px;height:20px;float:left;">第二个div</div>
</div>
这样就可以了。
实现两个DIV盒子并排,一行只显示两列DIV布局,使用width宽度+float浮动即可实现一行显示两列DIV布局。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>两个DIV并排</title>
<style>
.div-a{ float:left;width:49%;border:1px solid #F00}
.div-b{ float:left;width:49%;border:1px solid #000}
</style>
</head>
<body>
<div class="div-a">第一个DIV盒子</div>
<div class="div-b">第二个DIV盒子</div>
</body>
</html>
1,body margin:0;padding :0;} → body { margin:0;padding :0;} 少了个中括号
2, .left{float:left; width:184px; border:1px solid #000;} → float:left; 的分号
是半角的字符这个 float:left;
细节要注意了