css两个div不一样高

<div class="parent">
  <div class="child1">这里是第一个元素</div>
  <div class="child2">这里是第二个元素</div>
</div> 

方法一：通过设置高度

设置两个元素的高度为不同的像素值或百分比值是最简单的解决方法。但是这种方法只适用于已知高度的元素，对于内容高度不确定的元素可能会导致布局问题。例如：

.child1 {
  height: 200px;
}

.child2 {
  height: 300px;
} 

使用这种方法的缺点是不够灵活，对网页样式的修改也会带来麻烦。

方法二：使用Flexbox布局

Flexbox是一种新的布局方式，使得对齐和分布元素变得更加容易。在Flexbox中，可以使用align-items属性轻松控制元素的垂直对齐方式。在这种情况下，设置parent元素为flex，并设置为垂直居中即可：

.parent {
  display: flex;
  align-items: center;
} 

然而，Flexbox布局在较旧的浏览器中可能无法正常工作。

方法三：使用Grid布局

与Flexbox类似，CSS Grid布局是一种新的布局方式，可以轻松地控制元素的网格布局。在Grid布局中，使用grid-template-rows属性可以为不同的行设置不同的高度。

.parent {
  display: grid;
  grid-template-rows: 200px 300px;
} 

但是，与Flexbox一样，Grid布局在较旧的浏览器中可能无法正常工作。

总结

在设计网页时，我们经常会遇到两个元素高度不同的问题。通过设置高度、使用Flexbox或使用Grid布局，这个问题都可以得到解决。然而，我们需要根据具体情况进行选择，权衡优缺点并避免在旧的浏览器中出现兼容性问题。