html - 我有两列 HTML 设计。如何使 `#left` div 消耗尽可能多的空间(并可调整大小)，同时 `#right` 保持恒定大小？

Question

下面是说明问题的 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 占据左侧容器中的所有空间，同时仍然使 #right 适合其中(在右侧占据 250px)？

调整大小时，我希望 #left 调整大小，但 #right 仍处于正确的大小。

有什么想法可以做到这一点吗？

我尝试了以下方法，但都不起作用:

<强>1。将宽度 100% 添加到 #left

<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>

这不起作用 - 现在 #left 占据 100% 的内容，并且 #right 已被换行并推到其下方。

<强>2。将宽度 70% 添加到 #left

<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>

这不起作用，因为现在右侧有一个间隙。 #left 占用了 70% 的空间，但也许还有 72% 可用。

这也不起作用，因为当我将内容大小调整为小于 70% + 250px 时，#right 列会立即换行并跳转到 #left 下面。

<强>3。将 min-width: 100% 添加到 #left

<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>

这不起作用 - #left 现在再次占用 100%。

<强>4。添加 max-width: 100% 到 #left

<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>

这也不起作用 - #left 现在再次占用 100%。

<强>5。 #right 向右浮动

<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。使用 display: inline-block

<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 现在占用的空间与 left content 中的空间一样小。

感谢任何帮助!

Answer 1

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

CSS:

#content {
    display:table;
    table-layout:fixed;
    width:100%;
    height:100%;
}
#left {
    display:table-cell;
    background-color:red;
}
#right {
   display:table-cell;
    background-color:blue;
    width:250px;

}

演示:http://jsfiddle.net/f0xed7a2/

根据你的描述，这应该可以解决问题，很好的旧表......以 CSS 方式。