html布局,下面怎么使两个div在同一行显示?

 我来答
百度网友b6af295
2018-04-03 · TA获得超过1.2万个赞
知道小有建树答主
回答量:15
采纳率:100%
帮助的人:3456
展开全部

两种常用方法:
<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>

这样就可以了。

jack观天下
2015-05-20 · 带你看天下趣闻,有意思的视频!
jack观天下
采纳数:832 获赞数:3143

向TA提问 私信TA
展开全部

实现两个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>
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
彤顺0GO
2013-06-24 · TA获得超过587个赞
知道小有建树答主
回答量:363
采纳率:0%
帮助的人:279万
展开全部
你知道为什么 你的代码没法实现吗?

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;

细节要注意了
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(1)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式