I'；ve两列HTML设计。如何使`#left`div尽可能多地占用空间（并可调整大小），而`#right`保持不变的大小？

下面是HTML来说明问题：

<div id="content">
  <div id="left" style="float: left">
    left content
  </div>
  <div id="right" style="float: left; width: 250px">
    right content
  </div>
 </div>

这不起作用-现在

#left

占据了100%的内容，而

#right

已经被断行并推到下面

2。将宽度70%添加到#左侧

<div id="content">
  <div id="left" style="float: left; width: 100%">
    left content
  </div>
  <div id="right" style="float: left; width: 250px">
    right content
  </div>
 </div>

<div id="content">
  <div id="left" style="float: left; width: 70%">
    left content
  </div>
  <div id="right" style="float: left; width: 250px">
    right content
  </div>
 </div>

<div id="content">
  <div id="left" style="float: left; min-width: 100%">
    left content
  </div>
  <div id="right" style="float: left; width: 250px">
    right content
  </div>
 </div>

<div id="content">
  <div id="left" style="float: left; max-width: 100%">
    left content
  </div>
  <div id="right" style="float: left; width: 250px">
    right content
  </div>
 </div>

<div id="content">
  <div id="left" style="float: left;">
    left content
  </div>
  <div id="right" style="float: right; width: 250px">
    right content
  </div>
 </div>

这不起作用-

#left

现在又占了100%

4。添加最大宽度：100%至#左侧

<div id="content">
  <div id="left" style="float: left; width: 100%">
    left content
  </div>
  <div id="right" style="float: left; width: 250px">
    right content
  </div>
 </div>

<div id="content">
  <div id="left" style="float: left; width: 70%">
    left content
  </div>
  <div id="right" style="float: left; width: 250px">
    right content
  </div>
 </div>

<div id="content">
  <div id="left" style="float: left; min-width: 100%">
    left content
  </div>
  <div id="right" style="float: left; width: 250px">
    right content
  </div>
 </div>

<div id="content">
  <div id="left" style="float: left; max-width: 100%">
    left content
  </div>
  <div id="right" style="float: left; width: 250px">
    right content
  </div>
 </div>

<div id="content">
  <div id="left" style="float: left;">
    left content
  </div>
  <div id="right" style="float: right; width: 250px">
    right content
  </div>
 </div>

真的没用<代码>#left仍然尽可能占用一点空间

6。使用

显示：内联块

<div id="content">
  <div id="left" style="display: inline-block">
    left content
  </div>
  <div id="right" style="display: inline-block; width: 250px">
    right content
  </div>
 </div>

左内容
正确内容

和原来的问题一样

#left

现在占用的空间与

左侧内容中的空间一样小

感谢您的帮助

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

演示：

根据您的描述，这应该可以做到，好的旧表…在CSS方式上。
如果我理解正确，您有一个两列布局。您希望左列占用所有可用空间并重新调整大小。您希望右列保持固定宽度（250px）

这个问题可以通过以下方法解决

HTML

演示：

下面是正在发生的事情……

display:flex
声明使
div#content
成为一个flexbox。默认情况下，flexbox的子项（技术上称为“flex项”）在一行中对齐（
flex direction:row
）。因此，
div#left
和
div#right
现在都在一行中

div#left
中的
flex grow:1
声明为该框提供了所有可用宽度

flex:0 250px
声明是三个属性的简写：


flex-grow:0
（框不应增长）
弹性收缩：0
（框不应收缩）
弹性基准：250px
（初始尺寸为250px）

总之，这将导致一个框保持固定在250px的宽度

最后，当屏幕大小小于300px时（根据您在注释中的要求），媒体查询会将flexbox对齐方式从行切换到列

如果您感兴趣，这里有一个很好的flex属性参考指南：
这是什么？如果我理解正确…Np，给我几分钟，基本相同，只需为正确的内容设置新的所需宽度…谢谢！正在等待更新。：）真不敢相信是一样的。。。我可以想象我必须从左到右删除display:table单元格，并让它们按自然div顺序进行包装。：）但你就是那个人，所以我会听你的这里是-只需设置所需的宽度。。。其他的都一样。我也喜欢桌子哟，差不多了！除了我想#right跳到#left下面，以防内容是300px或更低，然后#right和#left都占据100%的内容（因为它们都在彼此下面，我可以显示100%）啊，废话-另一件事-我现在看到#left的
左边距
不再受到尊重，因为它是表格单元格。有没有办法在左右之间增加一点距离？我应该使用另一个宽度为10px的表格单元格吗？还是什么？酷，这也行！关于浏览器兼容性有什么想法吗？我仍然支持IE9…Michael-谢谢，但IE9不被支持：（你能想到其他的选择吗？请留下你的答案-这对任何IE10+的人来说都是非常有价值的！