怎么在一个div里面让三个div一排显示

.content{height:400px;margin-top:8px;background-color:#00CCFF;}<divclass="content"><d... .content {
height: 400px;
margin-top: 8px;
background-color: #00CCFF;
}

<div class="content">
<div id="right"></div>
<div id="mid"></div>
<div id="left"></div>
</div>
我怎么设置right、left、mid能让它们三个在一排显示??

就这个样式的

小弟求指教
展开
 我来答
固若老唐
推荐于2019-08-25 · 原神攻略、整活、抽卡、娱乐博主
固若老唐
采纳数:31 获赞数:16458

向TA提问 私信TA
展开全部

1、打开HTML编辑器(以hbuilder为例)

2、在左侧空白处右击新建web项目;

3、输入项目名称,点击确认;

4、在左侧点开项目双击index页面;

5、将下面代码复制到<body>中;

<div class="app">

<div style="display:inline-block;background:#f00;">div1</div>
<div style="display:inline-block;background:#0f0;margin-left:10px;">div2</div>
<div style="display:inline-block;background:#00f;margin-left:20px;">div2</div>

</div>

6、点击在浏览器内运行,使用你有的浏览器打开;

7、浏览器打开样式展示。

识掷路口

推荐于2017-09-01 · TA获得超过1091个赞
知道小有建树答主
回答量:1347
采纳率:57%
帮助的人:221万
展开全部

利用css属性里面的float属性。

首先写上3个div:

<div class="box1">这是第1个div<div>
<div class="box2">这是第2个div<div>
<div class="box3">这是第3个div<div>

接下来写css:

.box1,.box2.box3 { float:left; }

这样三个div就会一排显示了。

已赞过 已踩过<
你对这个回答的评价是?
评论 收起
abbeyone
推荐于2017-10-08 · TA获得超过119个赞
知道小有建树答主
回答量:107
采纳率:0%
帮助的人:66.2万
展开全部
.content {
height: 400px;
margin-top: 8px;
background-color: #00CCFF;
}
#right{
float:right; //向右浮动
width:200px; //必须要
height:XXXpx;
}
#mid{
float:right;
width:200px; //必须要
height:XXXpx;
}

#left{
float:left; // 此处也可以向右浮动 如有4个的话 就向右
width:200px; //必须要
height:XXXpx;
}
.cboth{
clear:both; //清除浮动
}
<div class="content">

<div id="right"></div>
<div id="mid"></div>
<div id="left"></div>
<div class="cboth"></div>
本回答被提问者和网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
qqlxinye
2014-10-15 · TA获得超过1980个赞
知道大有可为答主
回答量:2257
采纳率:65%
帮助的人:517万
展开全部
#right #mid #left{float:left:width:100px}
边距什么都可以定义。。。
追问
宽度还可以大点么?
追答
可以呀。100px改大点#right #mid #left{float:left;width:160px}
这里分开写,或#right,#mid,#left
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(2)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

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

类别

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

说明

0/200

提交
取消

辅 助

模 式