flex布局与float布局

最新推荐文章于 2024-09-29 21:43:16 发布

努力秃头的程序员

最新推荐文章于 2024-09-29 21:43:16 发布

阅读量157

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/wtmdaisnbu/article/details/133323741

版权

问题背景：在不规定父元素宽高的情况下，一行排列三个盒子，超出3个，按从左到右布局，每个子元素间隔10px。

解决思路：

一、使用float布局完成

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>flex</title>
	<style type="text/css">
		.boxfather{
			background-color: black;
			overflow:auto; 
		}
		.box{
			float:left;
			width: 30%;
			padding-bottom: 30%;
			margin-right: 10px;
			margin-bottom: 10px;
			background-color: red;
		}
	</style>
</head>

	<body>
		<div class="boxfather">
			<div class="box"></div>
			<div class="box"></div>
			<div class="box"></div>
			<div class="box"></div>
			<div class="box"></div>
			<div class="box"></div>
			<div class="box"></div>
			<div class="box"></div>
			<div class="box"></div>
		</div>	
	
</body>
</html>

二、使用flex完成

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>flex</title>
	<style type="text/css">
		.boxfather{
			background-color: black;
			display: flex;
			flex-wrap: wrap;
		}
		.box{
			margin-left: 10px;
			margin-bottom: 10px;
			width:calc(calc(100% / 3) - 10px);
			padding-top: calc(calc(100% / 3) - 10px);
			background-color: lightblue;
		}
	</style>
</head>

	<body>
		<div class="boxfather">
			<div class="box"></div>
			<div class="box"></div>
			<div class="box"></div>
			<div class="box"></div>
			<div class="box"></div>
			<div class="box"></div>
			<div class="box"></div>
			<div class="box"></div>
			<div class="box"></div>
		</div>	
	
	
	
</body>
</html>