弹性盒子布局

最新推荐文章于 2024-05-25 21:28:45 发布

婉菡

最新推荐文章于 2024-05-25 21:28:45 发布

阅读量116

点赞数

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/gcyqweasd/article/details/113244666

版权

前端专栏收录该内容

64 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>弹性盒子布局</title><!--将所有盒子弄到一行--例导航的应用-->
		<style>
			#con{
				width: 420px;
				height: 40px;
				display:flex;/*弹性盒子*/
				align-items: center;/*所有子元素内容均垂直居中*/
			}
			#con div{
				flex: 1;/*平均分配,每个div占一份*/
				text-align: center;/*内容水平居中*/
			}
			#con div a{
				text-decoration: none;/*去掉下划线*/
				color: black;/*字体颜色*/
				font-size: 13px;/*字体大小*/
			}
			*{
				margin: 0px;
				padding: 0px;
			}
			#images{
				display: flex;/*弹性盒子*/
				width: 430px;
				flex-wrap: wrap;/*当内容超出区域换行*/
				border:1px solid gray;
			}
			#images div{
				margin-left: 10px;
				margin-top: 10px;
			}
			#images div img{
				width: 200px;
				height: 200px;
			}
		</style>
	</head>
	<body>
		<div id="con">
			<div><a href="">新闻</a></div>
			<div><a href="">hao123</a></div>
			<div><a href="">体育</a></div>
			<div><a href="">娱乐</a></div>
			<div><a href="">法制</a></div>
			<div><a href="">教育</a></div>
			<div><a href="">其他</a></div>
		</div>
		<div id="images">
			<div>
				<img src="img/01.jpg" />
			</div>
			<div>
				<img src="img/02.jpg" />
			</div>
			<div>
				<img src="img/03.jpg" />
			</div>
			<div>
				<img src="img/04.jpg" />
			</div>
			<div>
				<img src="img/01.jpg" />
			</div>
		</div>
	</body>
</html>