css布局--父级元素高度自适应

最新推荐文章于 2024-07-08 10:37:02 发布

原创最新推荐文章于 2024-07-08 10:37:02 发布 · 7.2k 阅读

0 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

33 篇文章

订阅专栏

本文介绍了一种使用CSS实现子元素相对于父元素定位的方法，并确保父元素能够自适应子元素的高度，实现两个div底沿对齐的效果。文章通过具体实例探讨了绝对定位与相对定位的区别及其对布局的影响。

在项目中需要实现这样一个布局，子元素相对于父元素绝对定位，其中子元素的高度是确定的，希望父元素能够自适应子元素的高度，实现两个div的底沿对齐。

html:

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.p{
			background: yellow;
			border: 1px solid green;
			position: relative;

		}
		.c{
			position: absolute;
			left: 10px;
			top:10px;
			background: red;
			width: 100px;
			height: 100px;
			
		}
	</style>
</head>
<body>
	<div class="p">
		<div class="c">顶顶顶顶本部是基础元素的一部分，"mod"是必需内容单元，"grid"内独立或且可复用的功能区块，页面内容的主要承担者

要点：

自定义命名，以mod-为前缀
必须紧接着"grid"/"region"
</div>
	</div>
</body>

效果如下：