两个div彼此相邻，其中一个是含有100％宽度表的流体

Question

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

我有两个div彼此相邻，左边是220px的固定宽度，右边应占据剩下的空间。诀窍在于，正确的一个表格应该是流畅的，并且始终保持尽可能宽的范围。

即使没有正确的div我也尝试过，所以左边有div，右边有桌子。如果我没有将100%的表格宽度设置为罚款，但表格保持在大约150px，并且不会占用所有可用空间（因为表格会根据内容更改大小）。

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

感谢您的帮助。我用Google搜索，但一无所获。

Ps。：我不能将它们都设置为％或使用表格，因为根据设备大小，我将交换它们的位置（左边的两个div将彼此相邻而右边的那个div）会低于他们）。 我也不能使用calc函数来实现向后兼容，也不能使用JS。需要纯HTML和CSS。

Answer 1

您是否尝试过使用表格属性？ .wrapper可以是表格，然后他们的孩子就是细胞。看：

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

小提琴：http://jsfiddle.net/83295cvs/

Answer 2

将这两个div添加到100％父容器中，并将position设置为relative。然后，宽度为200px的固定div应该绝对位于左上角，并向右div添加填充左边等于左边div的宽度。

http://jsfiddle.net/z12p0b5v/

HTML：

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

CSS：

.container {
    width: 100%;
    position: relative;
}

.left {
    position: absolute;
    left: 0;
    top: 0;
}

.left .content {
    width: 200px;
    height: 200px;
    background-color: red;
}

.right {
    padding-left: 200px;
}

.right .content {
    background-color: blue;
    width: auto;
    height: 300px;
}

Answer 3

只需将包含width:100%的表格放入包含display:flex

的div中

.wrapper{
    width: 100%;
    max-width: 800px;
}

.left{
    border: 1px solid green;
    float: left;
    width: 200px;
}

.right{
    border: 1px solid red;
    width: 100%;
}

<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>
    <div style="display: flex;">
    <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>
</div>