浮动(1)

蟹道人

于 2013-12-31 14:52:47 发布

阅读量515

点赞数

CC 4.0 BY-SA版权

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

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

html 专栏收录该内容

5 篇文章

订阅专栏

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

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

/*最外层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>