Question

我的情况是，我有两个元素彼此相邻浮动，两个元素都没有明确的宽度 - 它们的宽度由它们的动态内容定义。

我需要右侧的元素尽可能多地占用元素行中的剩余垂直空间，而不设置任何宽度。

由于客户对使用浏览器不兼容性的投诉（主要是在IE中），我目前正试图逐步停止使用flexbox。

以下是我希望实现此效果的方案示例。

＆＃13;

.container {
  background-color: tomato;
  padding: 10px;
  overflow: auto;
  width: 700px;
}
nav {
  float: left;
  margin-right: 10px;
}
nav ul {
  background-color: blue;
}
nav ul li {
  display: inline;
  padding: 20px;
}
form {
  float: left;
  padding: 15px;
}

＆＃13;

<div class="container">
  <nav>
    <ul>
      <li>Home</li>
      <li>About</li>
      <li>Blog</li>
      <li>Contact</li>
    <ul>
  </nav>
  <form>
    <input type="text" placeholder="Search">
    <button type="submit">Submit</button>
  </form>
</div>

＆＃13;

Answer 1

这就是为什么我们喜欢flexbox，但是，如果你不得不支持MS不再支持的旧浏览器，请放弃并使用表格。不要给流体柱宽，给最后一个100％;

＆＃13;

table td:last-child {
  width: 100%;
  background-color: #aaa;
}

＆＃13;

<table>
  <tr>
    <td>Some content</td>
    <td>Bigger&nbsp;content</td>
    <td></td>
  </tr>
</table>

＆＃13;

顺便说一句，Michael's answer更好;它只使用CSS来获得表格效果。在这种情况下，你不能嘲笑那些要求你支持恐龙的人。

＆＃13;

ul {display: table}
li {display: table-cell}
li:last-child {
  width: 100%;
  background-color: #aaa;
}

＆＃13;

<ul>
  <li>Some content</li>
  <li>Bigger&nbsp;content</li>
  <li></li>
</ul>

＆＃13;

Answer 2

您可以使用display: table;和display: table-cell;模仿父母和弹性儿童，以获得更好的浏览器支持。

将父级设置为display: table;，将子级设置为display: table-cell;可以实现该布局。

.container {
  background-color: tomato;
  padding: 10px;
  overflow: auto;
  width: 700px;
  display: table;
}

nav ul {
  background-color: blue;
}

nav ul li {
  display: inline;
  padding: 20px;
}

form {
  padding: 15px;
  background: #eee;
}

.cell {
  display: table-cell;
}

<div class="container">
    <nav class="cell">
        <ul>
            <li>Home</li>
            <li>About</li>
            <li>Blog</li>
            <li>Contact</li>
        <ul>
    </nav>
    <form class="cell">
        <input type="text" placeholder="Search">
        <button type="submit">Submit</button>
    </form>
</div>

在没有flexbox的情况下创建一个元素来占用剩余空间

2 个答案: