Html 在两列布局中，使一列具有固定宽度，另一列占用剩余空间

有没有一种方法可以将右侧面板设置为200px，让左侧面板占据剩余空间

此时，右面板显示在左面板下方

此外，如果我更改父级宽度，左面板和右面板应显示在父级中，并相应调整大小

#左{
背景色：#ff0000；
}
#对{
浮动：对；
宽度：180px；
左边距：190px；
背景色：#00FF00；
}

左边
正确的

交换div以更改处理顺序：

 <div>
   <div id="right">
    right
</div>
<div id="left">
    left
</div>

 </div>

  <style>
  #left {
     background-color:#ff0000;
 }
 #right {
    float: right;
    width:180px;
    margin-left: 190px;
   background-color:#00FF00;
}
  /style> 

正确的
左边
#左{
背景色：#ff0000；
}
#对{
浮动：对；
宽度：180px；
左边距：190px；
背景色：#00FF00；
}
/风格>

有没有一种方法可以将右侧面板设置为200px，让左侧面板占据剩余空间

是。

有多种方法可以实现它。我在下面列出了四个选项。前三个需要在左面板上使用。使用的最后一个选项不需要它

使用

位置：绝对

：

*，：之前，：之后{
框大小：边框框；
保证金：0；
填充：0；
}
.集装箱{
位置：相对位置；
宽度：100%；
}
#左{
背景色：#ff0000；
位置：绝对位置；
排名：0；
左：0；
宽度：计算（100%-200px）；
}
#对{
宽度：200px；
背景色：#00FF00；
位置：绝对位置；
排名：0；
左：0；
左边距：计算（100%-200px）；
}

左边
正确的

这种布局可以通过使用Flexbox轻松解决，另一种选择是使用

calc

，浏览器支持的范围不太广，但可以帮助。。。您需要添加：

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

假设每个问题的其他元素（而不是代码）为200px，请从元素

#right

中删除

左边的边距

希望这有帮助

如果要检查浏览器对
calc
的支持，请查看您可以使用flexbox：


#容器{
显示：flex；/*建立flex容器*/
}
#左{
flex:1；/*占用所有可用空间*/
背景色：#ff0000；
}
#对{
flex:0 0 180px；/*不增长，不收缩，固定在180px宽度*/
背景色：#00FF00；
}

左边
正确的