Html 并排Div，一个固定大小，另一个宽度为百分比

我有两个Div标签
我想把它们并排做
右div固定在宽度200，左div填充剩余区域，但代码不起作用

这是我的密码

<div style="width: 100%;">
<div style="float: right; width: 200px; height: 100px; border: 5px dashed blue;position:fixed; "></div>
<div style="float: left; width: 100%; height: 100px; border: 5px dashed red; position: fixed;" ></div>    </div>

---

您可能不应该

浮动

和

位置：固定

您的元素。内联css也很糟糕。这是一张工作票。查看

位置：绝对内部
位置：相对

此外，我还添加了
框大小调整
，以使边框进入其容器中

HTML

<div id="div_cont">
    <div id="div2"></div>
    <div id="div3" ></div>    
</div>

您需要在css中使用边距属性
看这里
我已经在你的css中更改了一些属性

<div style="width: 100%;">
  <div style="float: right; width: 200px; height: 100px; border: 5px dashed blue;position:fixed; "></div>
  <div style="height: 100px; border: 5px dashed red; position: fixed; margin-right:200px;" ></div>
  <div style="clear:both;"></div>
</div>



祝你玩得愉快

<div style="width: 100%;">
  <div style="float: right; min-width: 200px; width:20%; height: 100px; border: 5px dashed blue; "></div>
  <div style="float:left; width:79%;">
    <div style="float: left; width: 100%; height: 100px; border: 5px dashed red;" ></div>
  </div>
</div>

在CSS3中是可能的。但要注意位置：固定

<div style="width: 100%; height: 100px; border: solid thin green; ">
<div style="float: right; width: 200px; height: 100px; border: 5px dashed blue; "></div>
<div style="float: left;  width: calc(100% - 220px); height: 100px; border: 5px dashed red; ">
</div>


您的-1可能重复
位置：固定div
上执行code>和
浮动
。还有内联CSS不好。@haxxxton我知道内联CSS不好，他把代码和内联CSS放在一起，所以我添加了/编辑了相同的代码。你有责任提供最佳实践代码：）同样，你还有
fixed
和
float
在同一
div
@haxxxton抓拍得好，祝你有愉快的一天☺@haxxxton您应该知道，并非所有用户都喜欢您的“最喜爱”（最佳/非最佳）做法。因此，您还应该提供一个内联版本：P-1，假设1%的差异=边界的5px。此外，内联css也不好
<div style="width: 100%; height: 100px; border: solid thin green; ">
<div style="float: right; width: 200px; height: 100px; border: 5px dashed blue; "></div>
<div style="float: left;  width: calc(100% - 220px); height: 100px; border: 5px dashed red; ">
</div>