使一个表格单元格填充剩余空间，而其他表格按内容填充空间

Question

我有以下布局：

<div class="container">
    <ul class="left-tabs tabs-group">
        <li>some</li>
        <li>content</li>
    </ul>
    <ul class="middle-tabs tabs-group">
        <li>a</li>
        <li>b</li>
    </ul>
    <ul class="right-tabs">
        <li>another</li>
        <li>content</li>
    </ul>
</div>


.container {
  overflow: auto;
  width: 500px;
}

li {
  float: left;
  list-style: none;
  padding: 5px;
}

.right-tabs {
  float: right;
}

.tabs-group {
  float: left;
}

是否有可能left-tabs和right-tabs按内容宽度加宽，middle-tabs拉伸以填充剩余空间？是否可以使用表格或没有表格？ 这是plunker。

Answer 1

只要内容不大于容器，就可以这样做。

＆＃13;

＆＃13;

.container {
  overflow: auto;
  width: 500px;
}
ul{
    padding:0;
    display:inline-block;
}
li {
  float: left;
  list-style: none;
  padding: 5px;
}
.left-tabs{
    background:blue;
    color:#FFF;
}
.right-tabs {
    background:red;
    color:#FFF;
    float:right;
}

＆＃13;

<div class="container">
    <ul class="left-tabs">
        <li>some</li>
        <li>content</li>
    </ul>
    <ul>
        <li>a</li>
        <li>b</li>
    </ul>
    <ul class="right-tabs">
        <li>another</li>
        <li>content</li>
    </ul>
</div>
<div class="container">
    <ul class="left-tabs">
        <li>some</li>
        <li>content</li>
    </ul>
    <ul>
        <li>content</li>
        <li>this is a very long content that is aligned</li>
    </ul>
    <ul class="right-tabs">
        <li>another</li>
        <li>content</li>
    </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

在这种情况下，如上例所示，所需的设计将不再适用。

编辑：你是对的。这是一个更丑陋的＆＃34;解决问题的方法，但它也有以下错误：中间选项卡中的非常长的文本被隐藏。如果你愿意，你可以用溢出：滚动来解决它，但它看起来并不好看。

＆＃13;

＆＃13;

.container {
  overflow: auto;
  width: 500px;
  position: relative;
}
ul {
  color: #FFF;
  padding: 0;
  display: flex;
  float: left;
}
li {
  float: left;
  list-style: none;
  padding: 5px;
}
.left-tabs {
  background: blue;
}
.middle-tabs {
  background: green;
  float: none;
}
.right-tabs {
  background: red;
  float: none;
  position: absolute;
  top: 0;
  right: 0;
}

＆＃13;

<div class="container">
  <ul class="left-tabs">
    <li>some</li>
    <li>content</li>
  </ul>
  <ul class="middle-tabs">
    <li>a</li>
    <li>b</li>
  </ul>
  <ul class="right-tabs">
    <li>another</li>
    <li>content</li>
  </ul>
</div>
<div class="container">
  <ul class="left-tabs">
    <li>some</li>
    <li>content</li>
  </ul>
  <ul class="middle-tabs">
    <li>content</li>
    <li>this is a very long content that is aligned</li>
  </ul>
  <ul class="right-tabs">
    <li>another</li>
    <li>content</li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;