CSS+DIV之流式布局

最新推荐文章于 2023-10-25 10:00:41 发布

weixin_34013044

最新推荐文章于 2023-10-25 10:00:41 发布

阅读量3.3k

点赞数

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/u/3640519/blog/1576340

版权

2019独角兽企业重金招聘Python工程师标准>>>

css流式布局通过采用float: none、left、right

清除流式布局则可以用clear: none、left、right、both

文件名：index.html，如下：

<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<head>
    <title>流式布局</title>
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="js/demo.js"></script>
</head>
<body>
    <div id="first">第一个div</div>
    <div id="second">第二个div</div>
    <div id="third">第三个div</div>
</body>
</html>

文件名：main.css，如下：

#first{
	left: 100px;
	top: 10px;
	width: 40%;
	height: 150px;
	background-color: #0fc;
	float: left;
}

#second{
	left: 100px;
	top: 10px;
	width: 40%;
	height: 100px;
	background-color: #f00;
	float: left;
}

#third{
	width: 90px;
	height: 100px;
	background-color: #0ab;
	float: left;
}

结果显示如图：