html - 两个 div 彼此相邻，其中一个是包含 100% 宽度表格的流体

Question

我知道有类似的问题，但我找不到问题的答案。

我有两个 div，左边是 220px 的固定宽度，右边应该占据剩余的空间。诀窍在于，右侧包含的表格也应该是流动的，并且始终保持尽可能宽。

我什至没有右边的div也试过了，所以左边有div，右边有表格。如果我不给表格设置 100% 的宽度，那没问题，但是表格保持在大约 150px，并且不会占用所有可用空间(因为表格改变大小基于内容)。

这是 JSFiddle:http://jsfiddle.net/4tchm0r9/6/

.wrapper {
  width: 100%;
  max-width: 800px;
}
.left {
  border: 1px solid green;
  float: left;
  width: 220px;
}
.right {
  width: 100%;
  border: 1px solid red;
}

<div class="wrapper">
  <div class="left">
    <div>
      Some random irrelevant div that has fixed width of 220px no matter what and contians two divs.
    </div>
    <div>
      Ladidaaaa? Maybe? Lolz.
    </div>
  </div>
  <table class="right">
    <tr>
      <td>
        Table that should occupy the rest of the space and fluidly resize!
      </td>
    </tr>
    <tr>
      <td>
        Table that should occupy the rest of the space and fluidly resize!
      </td>
    </tr>
  </table>
</div>

感谢您的帮助。我用谷歌搜索，但什么也没找到。

Ps.: 我不能将它们都设置为 % 或使用表格，因为根据设备大小，我将交换它们的位置(左边的两个 div 将彼此相邻，右边的一个将低于它们)。我也不能使用 calc 函数来实现向后兼容性，也没有 JS。需要纯 HTML 和 CSS。

Answer 1

您尝试过使用表格属性吗？.wrapper 可以是表格，然后它们的 child 将是单元格。看:

.wrapper{
    width: 100%;
    display: table;
}

.left{
    border: 1px solid green;
    width: 220px;
    display: table-cell;
}

.right{
    border: 1px solid red;
    display: table-cell;
}

<div class="wrapper">
  <div class="left">
    <div>
      Some random irrelevant div that has fixed width of 220px no matter what and contians two divs.
    </div>
    <div>
      Ladidaaaa? Maybe? Lolz.
    </div>
  </div>
  <table class="right">
    <tr>
      <td>
        Table that should occupy the rest of the space and fluidly resize!
      </td>
    </tr>
    <tr>
      <td>
        Table that should occupy the rest of the space and fluidly resize!
      </td>
    </tr>
  </table>
</div>

fiddle :http://jsfiddle.net/83295cvs/