Html 两个div元素，一个是固定的，另一个是自动的。如何修复？

我的大脑完全冻僵了，如果有人能帮我修复，我将不胜感激

我有2个div元素。称为左和右：

我希望右边的元素有一个固定的宽度为320px，左边的元素应该是auto。因此，当我收缩浏览器窗口时，只有左侧元素应该变小

如果左元素是固定的，我可以让它工作，但右元素不行

左侧的工作代码：

.left {width: 320px;float: left;background:#CCC;}
.right { margin-left: 320px; background:#FFFF00; }

.left_two { margin-right: 320px; background:#FFFF00; }
.right_two {width: 320px;float: right;background:#CCC; }

不是正确的工作代码：

.left {width: 320px;float: left;background:#CCC;}
.right { margin-left: 320px; background:#FFFF00; }

.left_two { margin-right: 320px; background:#FFFF00; }
.right_two {width: 320px;float: right;background:#CCC; }

但这就是我想要它的表现

您可以在这里遵循我的代码和项目：（只需收缩浏览器窗口）

---

谢谢Jack

像这样将你的

html

结构更改为

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

<div class="right_two">right</div>
<div class="left_two">left</div>

左
正确的
正确的
左边

---

使用CSS表格显示属性：

<div style='display:table'>
  <div class='display:table-cell; width: 320px;'>
     Left Column
  </div>
  <div class='display:table-cell;'>
     Right Column
  </div>
</div>

左列
右栏

您好，请尝试css的calc属性

我给出了一个详细的演示代码

html

---

注意：请在calc上查找更多信息

是这样的吗谢谢你的回复，是的，有点，但它应该是2x div元素。像这样吗？你能改变你的html吗？如果你改变你的html，你的js fiddle CSSYE就像我的fiddle一样，你的问题就解决了。哦，没有看到右二号和左二号的变更单，正在运行，谢谢！）