在HTML中，如何让两个DIV在同一行显示?
在HTML中，如何让两个DIV在同一行显示?
森栏浏览 10318回答 2
2回答
-
繁花如伊
在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>效果：
随时随地看视频慕课网APP
相关分类
CSS3