CSS布局通栏平均分布型

最新推荐文章于 2024-01-18 14:47:02 发布

原创最新推荐文章于 2024-01-18 14:47:02 发布 · 4.7k 阅读

26 ·

CC 4.0 BY-SA版权

web前端专栏收录该内容

50 篇文章

订阅专栏

本文探讨了如何使用CSS实现网页布局中通栏元素的平均分布，包括使用 Flexbox 和 Grid 布局的方法，以及浏览器兼容性和最佳实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>通栏平均分布型</title>
	<style>
	* {
		margin: 0;
		padding: 0;
	}
	.top {
		/* 通栏的盒子 可以不用写宽度 默认的宽度和浏览器一样宽 */
		height: 80px;
		border: 1px dashed #aaa;
		background-color: #eee;
		text-align: center;
	}
	.banner {
		width: 960px;
		height: 150px;
		border: 1px dashed #aaa;
		background-color: #eee;
		text-align: center;
		margin: 8px auto;
	}
	.small {
		margin-bottom: 10px;
		width: 960px;
		height: 100px;
		/* border: 1px dashed #aaa;
		background-color: gray; */
		text-align: center;
		margin: 8px auto;
	}
	ul {
		list-style: none;
	}
	.small ul li {
		width: 230px;
		border: 1px dashed #aaa;
		background-color: #eee;
		height: 100px;
		float: left;
		margin-left: 10px;
	}
	.small ul .nomargin {  /* 注意： 必须加权重 */
		margin-left: 0;
	}
	.footer {
		height: 150px;
		border: 1px dashed #aaa;
		background-color: #eee;
		margin-top: 10px;
	}
	</style>
</head>
<body>
	<div class="top">顶部通栏</div>
	<div class="banner">banner</div>
	<div class="small">
	<ul>
		<li class="nomargin">1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
	</ul>
	</div>

	<div class="small">
	<ul>
		<li class="nomargin">1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
	</ul>
	</div>
	<div class="small">
	<ul>
		<li class="nomargin">1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
	</ul>
	</div>
	<div class="footer"></div>
</body>
</html>