本文通过一个具体的HTML和CSS示例展示了如何使用浮动(float)属性来实现元素的并排显示。示例中包括三个不同大小的div元素，分别设置为红色、蓝色和绿色背景，并通过float属性实现了水平排列布局。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动 float </title>
<style type="text/css">
*{margin:0;padding:0;}
#wrap{width:700px;height:600px;}
#div1{background:red;width:200px;height:200px;float:left;}
#div2{background:blue;width:300px;float: left;height:300px;}
#div3{background:green;width:400px;height:400px;clear:both;}
</style>
</head>
<body>
<div id="wrap">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</div>
<html>
<head>
<meta charset="utf-8">
<title>浮动 float </title>
<style type="text/css">
*{margin:0;padding:0;}
#wrap{width:700px;height:600px;}
#div1{background:red;width:200px;height:200px;float:left;}
#div2{background:blue;width:300px;float: left;height:300px;}
#div3{background:green;width:400px;height:400px;clear:both;}
</style>
</head>
<body>
<div id="wrap">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</div>
</body>
具体结果如图所示
</html>
扫一扫
7280
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
