[分享]css中2个div顶部对齐

在 CSS 中，有时会遇到需要将两个 div 元素顶部对齐的情况。这可能因为它们的高度不一致或它们的定位方式不同而导致。在这篇文章中，我们将讨论两种将这两个 div 元素顶部对齐的方法。 方法一：使用...

在 CSS 中，有时会遇到需要将两个 div 元素顶部对齐的情况。这可能因为它们的高度不一致或它们的定位方式不同而导致。在这篇文章中，我们将讨论两种将这两个 div 元素顶部对齐的方法。
方法一：使用 flex 布局
CSS3 中引入了 flex 布局，它是一种强大的布局方式，可以轻松地实现元素的对齐。在这种情况下，我们可以使用 align-items 属性来使两个 div 元素顶部对齐。
下面是示例代码：

html
<div class="container">
  <div class="box1">Box 1</div>
  <div class="box2">Box 2</div>
</div> 

css
.container {
  display: flex;
  align-items: flex-start;
}
<br>
.box1, .box2 {
  width: 50%;
  height: 100px;
  border: 1px solid black;
} 

在这个示例中，我们将父容器 container 的 display 属性设置为 flex，并使用 align-items: flex-start; 将它们顶部对齐。
方法二：使用 position 和 top 属性
另一种方法是使用 position 和 top 属性来控制两个 div 元素的位置。在这种情况下，我们可以使它们的 position 属性都为 absolute，并将它们的 top 属性设置为相同的值。
下面是示例代码：

html
<div class="container">
  <div class="box1">Box 1</div>
  <div class="box2">Box 2</div>
</div> 

css
.container {
  position: relative;
  height: 200px;
  border: 1px solid black;
}
<br>
.box1, .box2 {
  position: absolute;
  width: 50%;
  height: 100px;
  border: 1px solid black;
  top: 0;
}
<br>
.box1 {
  left: 0;
}
<br>
.box2 {
  right: 0;
} 

在这个示例中，我们将父容器 container 的 position 属性设置为 relative，将 box1 和 box2 的 position 属性设置为 absolute，并设置它们的 top 属性值为 0。此外，我们还使用了 left 和 right 属性将它们分别左右对齐。
总结
在 CSS 中，有多种方法可以将两个 div 元素顶部对齐。使用 flex 布局和 position 属性是两种常用的方法。我们可以根据具体情况选择性地使用。希望这篇文章能够帮助你更好地掌握 CSS 的布局技巧。