如何让 HTML 中的 Box1 排除 Box2 的内容后自动占据剩余空间？

珍惜时间，勤奋学习！今天给大家带来《如何让 HTML 中的 Box1 排除 Box2 的内容后自动占据剩余空间？》，正文内容主要涉及到等等，如果你正在学习文章，或者是对文章有疑问，欢迎大家关注我！后面我会持续更新相关内容的，希望都能帮到正在学习的大家！

如何让 box1 排除 box2 的内容后占据剩余空间

在 html 结构中，我们有如下代码片段：

在这个结构中，希望 box1 排除 box2 的内容后能够自动占据剩余的空间。

方案 1：使用 calc()

在不改变原有 display 属性的情况下，可以通过使用 calc() 函数来实现。以下 css 代码会让 box1 的宽度为剩余空间（即 100% - box2 的宽度 200px）：

#box1 {
  width: calc(100% - 200px);
}

方案 2：使用 flex 布局

另一种方法是使用 flex 布局。以下 css 代码会让 box1 占据剩余的横向空间（即 flex 布局下的余空间）：

#content {
  display: flex;
  flex-direction: row;
}

#box1 {
  flex: 1;
}

#box2 {
  flex-shrink: 0;
  width: 200px;
}

以上就是《如何让 HTML 中的 Box1 排除 Box2 的内容后自动占据剩余空间？》的详细内容，更多关于的资料请关注golang学习网公众号！