用纯CSS怎么让3个或更多的DIV处于同一行?
展开全部
div是块状元素,按照默认文档流占一行,所以为了使多个DIV处于同一行,可以用两种方式:
将div改为行内元素
display:inline-block;
改变默认的文档流
float:left;
示例如下:
创建Html元素
<div class="test test1">
方式一:display:inline-block;<br>
<div></div><div></div><div></div>
</div>
<div class="test test2">
方式二:float:left;<br>
<div></div><div></div><div></div>
</div>设置css样式
div.test{width:400px;height:100px;margin:10px;border:4px solid #ebbccb;}
div.test1 div{
width:100px;height:50px;
border:2px solid #ccc;
margin:10px;
display:inline-block; /*注意此处采用行内元素的方式*/
}
div.test2 div{
width:100px;height:50px;
border:2px solid #ccc;
margin:10px;
float:left; /*注意此处改变默认文档流,采用浮动的方式*/
}观察显示效果
展开全部
可以利用float属性实现多个div处于统一行。
例如:
div{
width:30px;
height: 30px;
float:left;
}
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。
如果浮动非替换元素,则要指定一个明确的宽度;否则,它们会尽可能地窄。
还可以利用display:inline;将div强制转换为内联元素也可实现多个div处于同一行。
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
2013-06-01
展开全部
设置最外层的宽度 比如 width:800px然后设置你要并列显示3个的DIV 的浮动 和 宽度 比如 float:left width:200px
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
2013-06-01
展开全部
宽度够的话,一个左浮动动,一个右浮动,一个不浮动就行了
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
2013-06-01
展开全部
用class 同一个css就可以了
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询