网页盒子水平布局方式

最新推荐文章于 2025-04-01 10:06:20 发布

黑猫Sennyou

最新推荐文章于 2025-04-01 10:06:20 发布

阅读量3.8k

点赞数 3

分类专栏： html+css 文章标签： html css

本文链接：https://blog.csdn.net/csdn_491407692/article/details/124397826

版权

本文介绍了三种常见的CSS布局方式：浮动布局、弹性盒子布局和网格布局。浮动布局适用于简单的元素排列，但灵活性较低。弹性盒子是CSS3的布局模式，适合响应式设计，通过justify-content属性调整子元素对齐方式。网格布局则提供了更自由的布局方式，允许快速创建复杂的二维布局，无需浮动或定位。

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

盒子水平布局方式简单一览

使用浮动 < div >;< ul >;< ol >
使用弹性盒子 display: flex;
使用网格布局 display: grid;

1 - 浮动

< div >
用div盒子进行大盒子套小盒子进行布局，使用浮动进行水平排列，元素间距用“外间距-margin”和“内间距-padding”来控制

	<style>
		.parent {
     
			width: 510px;
			height: 400px;
			background: #f7f7f7;
			padding-left: 20px;
		}
		.children {
     
			width: 150px;
			height: 280px;
			float: left;
			background: #dddddd;
			margin: 20px 20px 0 0;
		}
	</style>
	-------
	<body>
		<div class="parent">
			<div class="children"></div>
			<div class="children"></div>	
			<div class="children"></div>
		</div>
	</body>

这样布局缺点也很明显，不够灵活，在间距控制上并不方便，如果只是简单的几个元素布局可以用一下。ps：如果浮动影响了后面的布局，可以用 “clear: both;” 清除浮动。

< ul >或者< ol >
使用列表跟直接用div作用相差并不是很大，用法也跟div的用法差不多，只不过在列表里除了浮动还可用display进行布局。

使用浮动float；

	<style>
		.parent {
     
			width: 510px;
			height: 400px;
			background: #f7f7f7;
			padding-left: 20px;
			list-sty

最低0.47元/天解锁文章