CSS 如何使用HTML和CSS模拟水平填充

在本文中，我们将介绍如何使用HTML和CSS来模拟水平填充。水平填充是指元素在容器内平均分布的效果，常被用于创建栏目式布局或者导航栏。

阅读更多：https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 教程

使用Flexbox布局实现水平填充

Flexbox布局是CSS的一种强大工具，可以轻松实现水平填充的效果。我们可以将容器设置为display: flex;，然后使用justify-content: space-between;来将内容在容器中平均分布。

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

.container {
  display: flex;
  justify-content: space-between;
}

.item {
  /* 这里可以添加样式来设置每个元素的宽度、高度等属性 */
}

上述代码将容器内的三个项目平均分布，并且自动调整项目之间的间距，实现了水平填充的效果。

使用Grid布局实现水平填充

CSS的Grid布局也可以用来实现水平填充。我们可以将容器设置为display: grid;，使用grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));来让项目平均分布，同时确保每个项目的最小宽度为200px。

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

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

.item {
  /* 这里可以添加样式来设置每个元素的宽度、高度等属性 */
}

上述代码将容器内的三个项目平均分布，并且自动调整项目之间的间距，实现了水平填充的效果。

使用calc()函数实现水平填充

如果你需要实现水平填充，并且对项目的宽度有特定的要求，可以使用CSS的calc()函数。通过计算每个项目的宽度并设置为50%（或其他百分比值），然后使用calc(100% - total_width)来计算容器剩余的宽度，并将其平均分配给项目。

<div class="container">
  <div class="item item1">Item 1</div>
  <div class="item item2">Item 2</div>
  <div class="item item3">Item 3</div>
</div>

.container {
  display: flex;
}

.item {
  width: 50%;
  /* 这里可以添加其他样式来设置每个元素的宽度、高度等属性 */
}

.item1 {
  width: calc(50% - 20px); /* 例外：第一个元素的宽度为50%减去20像素 */
}

/* 其他项目的样式省略 */

上述代码将容器内的三个项目平均分布，并且自动调整项目之间的间距，实现了水平填充的效果。注意，我们使用calc()函数来确保容器内所有项目的总宽度为100%。