css 多列等分布局使用float

最新推荐文章于 2022-07-07 15:04:44 发布

xvzhengyang

最新推荐文章于 2022-07-07 15:04:44 发布

阅读量550

点赞数

CC 4.0 BY-SA版权

分类专栏：前端 html css 文章标签： css 多列布局等分 float

本文链接：https://blog.youkuaiyun.com/xvzhengyang/article/details/84638871

前端同时被 3 个专栏收录

80 篇文章

订阅专栏

css

47 篇文章

订阅专栏

html

28 篇文章

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>多列等分布局使用float</title>
		<!-- 百分比 box-sizing为border-box:padding和border都被计算到width里面 -->
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
				width: 100%;
			}
			.parent{
				/* margin-left: -20px; */
				height: 100%;
				width: 100%;
				background-color: black;
			}
			.column{
				float: left;
				width: 33.33%;
				height: 100%;
				/* padding-left: 20px; */
				box-sizing: border-box;
			}
		</style>
	</head>
	<body>
		<div class="parent">
			<div class="column" style="background-color:red;">
				first
			</div>
			<div class="column" style="background-color: yellow;">
				second
			</div>
			<div class="column" style="background-color: green;">
				third
			</div>
			<!-- <div class="column" style="background-color: #0000FF;">
				four
			</div> -->
		</div>
	</body>
</html>