怎样让宽度不固定的 div 两侧保持固定间距

在网页设计中，常常会遇到需要让宽度不固定的 div 两侧保持固定间距的情况。这一需求能够提升页面的布局美感与用户体验，下面就为大家介绍几种实现的方法。

可以利用 CSS 的盒模型属性来达成目标。通过设置 div 的 padding 和 box-sizing 属性来巧妙处理。例如，给 div 设置固定的 padding-left 和 padding-right，同时将 box-sizing 设置为 border-box。这样，即使 div 的宽度随着内容的变化而改变，两侧的间距也会始终保持固定。代码示例如下：

.example {
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}

使用 flexbox 布局也是一个不错的选择。flexbox 为我们提供了强大的布局功能。将父元素的 display 设置为 flex 或 inline-flex，然后利用 justify-content 和 space-around 或 space-between 属性来控制子元素（即宽度不固定的 div）的间距。若使用 space-around，会在子元素两侧均匀分配空间，实现两侧固定间距；若使用 space-between，则会使子元素两端对齐，且间距均匀分布。代码如下：

.parent {
  display: flex;
  justify-content: space-around;
}

另外，grid 布局同样能轻松解决这一问题。将父元素的 display 设置为 grid，定义列布局，通过设置 grid-gap 来指定列与列之间的间距。这样，宽度不固定的 div 在网格布局中就能保持两侧固定间距。代码如下：

.parent {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 20px;
}

在实际项目中，我们需要根据具体的页面布局和需求，灵活选择合适的方法。无论是传统的盒模型属性设置，还是现代化的 flexbox 和 grid 布局，都能有效实现宽度不固定的 div 两侧保持固定间距，为用户打造出美观、舒适的网页布局。