CSS 让上方的 div 和下方的 div 一样宽

在本文中，我们将介绍如何使用 CSS 实现让上方的 div 和下方的 div 一样宽的效果。

阅读更多：CSS 教程

使用盒模型

要让两个 div 元素宽度相等，首先要了解盒模型的概念。在 CSS 中，每个元素都被认为是一个矩形的盒子，包括内容、内边距、边框和外边距。元素的宽度由内容区域的宽度加上左右内边距的宽度确定。通过设置盒模型的属性，我们可以控制元素的宽度。

使用 flex 布局

Flex 布局是一种现代的、灵活的布局方式，可以实现将上方的 div 和下方的 div 设置成相等的宽度。在容器上应用 display: flex 属性，可以将其子元素视为一个弹性盒子。然后，可以使用 flex: 1 属性将两个 div 元素设置成相等的宽度。

.container {
  display: flex;
}

.container > div {
  flex: 1;
}

这样，上方的 div 和下方的 div 将以相等的宽度显示。

使用网格布局

网格布局是一种二维布局系统，可以将页面划分为行和列，使得元素可以在这个网格中进行放置。使用网格布局，我们可以轻松实现让上方的 div 和下方的 div 设置成相等的宽度。

.container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
}

.container > div {
  grid-row: 1;
  grid-column: 1;
}

在这个例子中，我们将容器的网格设置为一列，子元素的行和列都设置为 1。这样，上方的 div 和下方的 div 将以相等的宽度呈现。

使用 JavaScript

如果使用纯 CSS 的方法无法实现让上方的 div 和下方的 div 设置成相等的宽度，我们还可以通过 JavaScript 来实现。

const topDiv = document.querySelector('.top-div');
const bottomDiv = document.querySelector('.bottom-div');
const width = bottomDiv.offsetWidth;

topDiv.style.width = `${width}px`;

通过获取下方 div 的宽度，然后将宽度应用到上方 div 上，可以实现两个 div 宽度相等的效果。

总结

通过盒模型、Flex 布局、网格布局和 JavaScript，我们可以方便地实现让上方的 div 和下方的 div 设置成相等的宽度。根据具体的需求和使用场景，选择适合的方法来实现这一效果。无论是在响应式设计中还是在常规页面布局中，掌握这些技巧将帮助您更好地布置网页的结构和样式。