浮动(2)

蟹道人

于 2013-12-31 14:55:01 发布

阅读量490

点赞数

CC 4.0 BY-SA版权

分类专栏： html 文章标签： html

本文链接：https://blog.youkuaiyun.com/csdt_csdt/article/details/17715025

html 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个使用CSS实现的简单浮动布局案例。通过设置不同div元素的样式，包括边框、宽度、高度及浮动属性，展示了如何使多个div元素在页面上进行水平排列，并保持特定的间距。案例中还涉及了如何利用浮动属性让元素并排显示，适用于初学者学习CSS布局的基础知识。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/*最外层div的样式*/
.div1{
	border:1px solid red;
	width:700px;
	height:500px;
}
/*里层div的样式*/
.div2{
		border:1px solid blue;
		width:150px;
		height:100px;
		margin-top:5px;
		float:left;
}

<!--浮动的案例-->
<html>
<head>
<link rel="stylesheet" type="text/css" href="leftfloat.css"/>	
</head>	
<body>
<div class="div1">
<div class="div2">div1</div>	
<div style="height:120px" class="div2">div2</div>	
<div class="div2">div3</div>	
<div style="height:120px" class="div2">div1</div>	
<div class="div2">div2</div>	
<div class="div2">div3</div>	
<span class="div2">span1</span>
<span class="div2">span1</span>
<span class="div2">span1</span>
</div>	
</body>
</html>