多个div在一个div中一行水平显示(float)

最新推荐文章于 2025-03-13 14:57:46 发布

原创最新推荐文章于 2025-03-13 14:57:46 发布 · 1w 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#html #div #一行 #浮动 #float

前端专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何使用CSS中的float属性实现div元素在同一行显示，并通过实例演示了如何让多个div元素并排布局，同时确保后续元素正常排列而不影响整体布局。

div本身是block元素，块状元素默认占据一行，所以直接显示的话是不能在一行显示的

以下图为例

left，right在一行，bottom在底下

html代码如下：

<div class="div">
	<div class="div1">
    left
    </div>
    <div class="div2">
    right
    </div>
    <div class="div3">
	bottom</div>
</div>

一个大div包含3个小div并且前2个一行显示第三个占据下面的一行。

经典做法是用float方法，div1,div2浮动div3 清除浮动即可实现，代码：

<style>
html,body{
	margin:0;
	padding:0;
}
div{
	text-align:center;
	
}
.div{
	background-color:#F00;
	overflow:auto;
	
}
.div>.div1{
	float:left;
	width:50%;
	height:100px;
	line-height:100px;
	background-color:#0C0;
}
.div>.div2{
	float:left;
	width:50%;
	height:100px;
	line-height:100px;
	background-color:#aaa;
}
.div3{
	height:200px;
	line-height:200px;
	background-color:#FCF;
	clear:both;
}




</style>