如何让 box1 排除 box2 的内容后占据剩余空间
在 html 结构中，我们有如下代码片段：
<div id="content" style="position: absolute; top: 24px; bottom: 24px; width: 100%; height: 100%;">
<div id="box1" style="display: inline-block; background-color: #eee; width: 100%; height: 100%;"></div>
<div id="box2" style="display: inline-block; background-color: #ddd; width: 200px; height: 100%;"></div>
</div>在这个结构中，希望 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 的内容后自动占据剩余空间？的详细内容，更多请关注php中文网其它相关文章！
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
785
