CSS布局之如何让空元素跟随有内容元素的高度

在前端开发中，常常会遇到这样的问题：两个子元素并排排列，其中一个子元素有内容，自动撑开了高度，而另一个子元素为空，如何让这个空元素跟随有内容元素的高度？本文将介绍几种常用的CSS布局方法来解决这个问题。

一、Flex布局

Flex布局是CSS3中引入的一种新的布局方式，它可以很方便地实现元素的水平或垂直排列，并且可以自动分配元素的空间。

要使用Flex布局，首先需要将父元素设置为display: flex，然后就可以使用flex-grow、flex-shrink和flex-basis属性来控制子元素的尺寸。

.parent {
  display: flex;
}

.child1 {
  flex-grow: 1;
}

.child2 {
  flex-shrink: 1;
  flex-basis: 0;
}

在这种情况下，child1元素将自动撑开高度，而child2元素将跟随child1元素的高度。

二、CSS overflow

CSS overflow属性可以控制元素溢出的内容如何显示。

如果将父元素的overflow属性设置为hidden，那么子元素的内容将被裁剪，不会溢出父元素。

.parent {
  overflow: hidden;
}

在这种情况下，child2元素将跟随child1元素的高度，但是child2元素的内容将被裁剪。

三、CSS visibility

CSS visibility属性可以控制元素是否可见。

如果将child2元素的visibility属性设置为hidden，那么child2元素将不可见，但仍然占据空间。

.child2 {
  visibility: hidden;
}

在这种情况下，child2元素将跟随child1元素的高度，但child2元素将不可见。

四、CSS position

CSS position属性可以控制元素在文档流中的位置。

如果将child2元素的position属性设置为absolute，那么child2元素将脱离文档流，并根据其top、left、bottom和right属性来定位。

.child2 {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

在这种情况下，child2元素将跟随child1元素的高度，并且child2元素的内容将不会被裁剪。

五、CSS display

CSS display属性可以控制元素的显示方式。

如果将child2元素的display属性设置为none，那么child2元素将不显示，也不会占据空间。

.child2 {
  display: none;
}

在这种情况下，child2元素将不会跟随child1元素的高度，也不会显示。

总结

以上就是几种常用的CSS布局方法，可以用来解决两个子元素并排排列，其中一个子元素有内容，自动撑开了高度，而另一个子元素为空，如何让这个空元素跟随有内容元素的高度这个问题。

在实际项目中，可以根据具体情况选择使用哪种方法。