当左div具有固定宽度而右div不具有时，我如何调整中心div的宽度以利用所有可用空间？

Question

我有以下情况，我的左侧DIV包含我的徽标，它有一个固定的宽度。我的右侧DIV包含我的菜单，它没有固定的宽度。最后，我的中心DIV包含一个搜索字段。

我希望我的中心DIV能够使用剩下的所有水平空间，而右侧DIV的宽度可能是最小的，所以基本上要有菜单的宽度。但由于菜单项可以更改，我无法为右侧DIV设置固定宽度。

有一个很好的CSS解决方案吗？

| --- Logo --- | | ---搜索栏--- | | ---菜单项--- |

<div id="container">
    <h1 id="logo">
        <img src="logo.svg" alt="Logo">
    </h1>

    <div id="search">
        <input type="text" name="search">
    </div>

    <div id="menu">
        <a href="#">Home</a>
        <a href="#">Blog</a>
        <a href="#">Users</a>
        <a href="#">About Us</a>
    </div>
</div>

Answer 1

使用flex-box

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container {
  margin: 10px auto;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  border: 1px solid grey;
}
.logo img {
  display: block;
  padding: 0;
  margin: 0;
}
.container > * {
  flex: 0 1 auto
}
.logo {
  flex-grow: 0;
  background: red;
  margin: 0;
}
.search {
  background: lightblue;
  text-align: center;
  align-items: center;
  display: flex;
  flex-grow: 1;
  padding: 10px;
}
.search input {
  width: 100%;
}
.menu {
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align: center;
}
.menu a {
  flex: ;
  height: 35px;
  line-height: 35px;
  background: orange;
}

<div class="container">
  <h1 class="logo">
        <img src="http://lorempixel.com/output/city-q-c-200-150-8.jpg" alt="Logo">
    </h1>

  <div class="search">
    <input type="text" name="search">
  </div>

  <div class="menu">
    <a href="#">Home</a>
    <a href="#">Blog</a>
    <a href="#">Users</a>
    <a href="#">About Us</a>
  </div>
</div>

FlexBox - Codepen Demo

Answer 2

我不想使用flexbox（由于兼容性或其他原因），您可以尝试使用display属性和table-cell值：

 .row {
    display: table-row;
 }
 .left {
    display: table-cell;
    width: 100px;
 }
 .center, right {
    display: table-cell;
 }

和html

 <div class="row">
     <div class="left"></div>
     <div class="center"></div>
     <div class="right"></div>
 </div>