在HTML中，如何让两个DIV在同一行显示?
2 回答
繁花如伊
TA贡献2012条经验 获得超12个赞
在HTML中，让两个div在同一行显示的方法：
1、使用浮动float
代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div同行显示</title>
<style type="text/css">
#container{overflow: hidden;}/* 清除浮动 */
#container div{width:200px;height:100px;}
.box1{background: red;float: left;}
.box2{background: green;float:left;}
</style>
</head>
<body>
<div id ="container">
<div class="box1">box1</div>
<div class="box2">box2</div>
</div>
</body>
</html>
效果：
2、inline-block将这两个div变成内联-块状元素
代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div同行显示</title>
<style type="text/css">
body{background: #ddd;}
div{width:200px;height:100px;display: inline-block;}
.box3{background: #e4007e;}
.box4{background: blue;}
</style>
</head>
<body>
<div class="box3">box3</div>
<div class="box4">box4</div>
</body>
</html>
效果：
- 2 回答
- 0 关注
- 10317 浏览
添加回答
举报
0/150
提交
取消