浮动(1)

最新推荐文章于 2025-12-04 17:59:42 发布

原创最新推荐文章于 2025-12-04 17:59:42 发布 · 527 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html

html 专栏收录该内容

5 篇文章

订阅专栏

本文通过一个具体的HTML页面实例介绍了如何使用CSS实现元素的浮动布局。案例中包含了一个外部div和三个内部div，通过设置不同的边框颜色和浮动属性来展示浮动效果。此示例有助于理解CSS浮动的基本用法。

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

/*id选择器*/
#id1{
	float:right;	/*右浮动*/
}

<!--浮动的案例-->
<html>
<head>
<link rel="stylesheet" type="text/css" href="float.css"/>	
</head>	
<body>
<div class="div1">
<div class="div2" id="id1">div1</div>	
<div class="div2">div2</div>	
<div class="div2">div3</div>	
</div>	
</body>
</html>