怎么在一个div里面让三个div一排显示
.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能让它们三个在一排显示？？
就这个样式的
小弟求指教
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、浏览器打开样式展示。
温馨提示：内容为网友见解，仅供参考
第1个回答 推荐于2017-09-01
利用css属性里面的float属性。
首先写上3个div：
<div class="box1">这是第1个div<div><div class="box2">这是第2个div<div>
<div class="box3">这是第3个div<div>
接下来写css：
这样三个div就会一排显示了。
第2个回答 推荐于2017-10-08
.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>本回答被提问者和网友采纳
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>本回答被提问者和网友采纳
第3个回答 2014-10-15
#right #mid #left{float:left:width:100px}
边距什么都可以定义。。。追问
边距什么都可以定义。。。追问
宽度还可以大点么?
追答可以呀。100px改大点#right #mid #left{float:left;width:160px}
这里分开写，或#right,#mid,#left
相似回答
