css实现不等高块状元素盒子按照高度自适应（最高的盒子）

最新推荐文章于 2024-09-06 11:00:54 发布

微笑么么哒

最新推荐文章于 2024-09-06 11:00:54 发布

阅读量512

点赞数

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/qq_37759901/article/details/132694829

版权

1.boxItem g给盒子高度33%，整行自动缩放高度在这里插入图片描述
2.不给boxItem 高度，同行不等高块状元素按照最高的盒子自适应内容动态来保持高度一致

<template>
	<div class='allBox'>

		<div class="boxItem">
			<div class="smallBox">
				第一个块
				<div class="p">下边</div>
			</div>
			<div class="smallBox">第二个块第二个块第二个块第二个块第二个块第二个块第二个块第二个块第二个块第二个块
				第二个块第二个块第二个块第二个块第二个块第二个块第二个块第二个块第二个块第二个
				第二个块第二个块第二个块第二个块第二个块第二个块第二个块第二个块第二个块第二个
				第二个块第二个块第二个块第二个块第二个块第二个块第二个块第二个块第二个块第二个
			</div>
			<div class="smallBox">第三个块</div>
		</div>
		<div class="boxItem">
			<div class="smallBox">
				第一个块
				<div class="p">下边</div>
			</div>
			<div class="smallBox">第二个块第二个块第二个块第二个块第二个块第二个块第二个块第二个块第二个块第二个块</div>
			<div class="smallBox">第三个块</div>
		</div>
		<div class="boxItem">
			<div class="smallBox">
				第一个块
				<div class="p">下边</div>
			</div>
			<div class="smallBox">第二个块第二个块第二个块第二个块第二个块第二个块第二个块第二个块第二个块第二个块</div>
			<!-- <div class="smallBox">第三个块</div> -->
		</div>
	</div>
</template>
<style>
	.boxItem {
		/* display: -webkit-box;和display: flex;两种方法效果一样，使用一个即可/* justify-content: flex-start; 这个方法可用可不用，看项目需求是居中对其，两端对其还是其他对其*/
		/* display: -webkit-box; */
		display: flex;
		width: 100%;
		border: 1px solid;
		/* 去掉高度就是自动实现同行不等高块状元素按照最高的盒子自适应内容动态来保持高度一致 */
		height: 33%;
	}
	.smallBox {
		border: #55ff00 1px solid;
		width: 31%;
		margin: 1% 1%;
		/* 注意:这个宽度和这个间距是需要计算的,刚好等于100%才能完全对整齐 比如31*3=93  1*2*3=6% 93+6=99接近100，页面看着调即可*/
	}
</style>
<!-- https://blog.flqin.com/415.html可参考 -->