
如何让 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;
}











