CSS填充剩余宽度答案

【问题标题】：CSS fill remaining widthCSS填充剩余宽度
【发布时间】：2013-09-28 12:09:50
【问题描述】：

我有这个标题栏。

<div id="header">
        <div class="container">
            <img src="img/logo.png"/>
            <div id="searchBar">
                <input type="text" />
            </div>
            <div class="buttonsHolder">
                <div class="button orange inline" id="myAccount">
                    My Account
                </div>
                <div class="button red inline" id="basket">
                    Basket (2)
                </div>
            </div>

        </div>
    </div>

我需要 searchBar 来填补 div 中剩余的空白。我该怎么做？

这是我的 CSS

#header { 
    background-color: #323C3E;
    width:100%;
}

.button {
    padding:22px;
}


.orange {
    background-color: #FF5A0B;
}

.red {
    background-color: #FF0000;
}

.inline { 
    display:inline;
}

#searchBar {
    background-color: #FFF2BC;
}

【问题讨论】：

搜索栏来填补容器 div 中剩余的空白，这是你的意思吗？
是的，这就是我所追求的
如果你知道其他兄弟的（固定）宽度，你可以使用 CSS3 中的calc() 方法来指定搜索栏的宽度。否则，恐怕您可能不得不依靠JS来做到这一点。
相关stackoverflow.com/a/22719552/759452

标签： css

【解决方案1】：

使用calc！

https://jsbin.com/wehixalome/edit?html,css,output

HTML：

<div class="left">
  100 px wide!
  </div><!-- Notice there isn't a space between the divs! *see edit for alternative* --><div class="right">
    Fills width!
  </div>

CSS：

.left {
  display: inline-block;
  width: 100px;

  background: red;
  color: white;
}
.right {
  display: inline-block;
  width: calc(100% - 100px);

  background: blue;
  color: white;
}

更新：作为在 div 之间没有空格的替代方法，您可以在外部元素上设置 font-size: 0。

【讨论】：

请注意，只要这仅针对台式机，它的兼容性就可以，但存在一些移动问题，在我撰写本文时，全球 82% 的使用过的浏览器都可用这。来源：caniuse.com/#search=calc
如果不知道左边元素的宽度怎么办？例如，我有左元素的动态宽度。
如果将float: left（或右）添加到某个类（.left 或.right），则不需要保留没有空格的 div

【解决方案2】：

您可以使用 CSS 表格单元格来实现这种布局。

稍微修改您的 HTML，如下所示：

<div id="header">
    <div class="container">
        <div class="logoBar">
            <img src="http://placehold.it/50x40" />
        </div>
        <div id="searchBar">
            <input type="text" />
        </div>
        <div class="button orange" id="myAccount">My Account</div>
        <div class="button red" id="basket">Basket (2)</div>
    </div>
</div>

只需移除两个 .button 元素周围的包装元素即可。

应用以下 CSS：

#header {
    background-color: #323C3E;
    width:100%;
}
.container {
    display: table;
    width: 100%;
}
.logoBar, #searchBar, .button {
    display: table-cell;
    vertical-align: middle;
    width: auto;
}
.logoBar img {
    display: block;
}
#searchBar {
    background-color: #FFF2BC;
    width: 90%;
    padding: 0 50px 0 10px;
}

#searchBar input {
    width: 100%;
}

.button {
    white-space: nowrap;
    padding:22px;
}

将display: table 应用到.container 并赋予其100% 的宽度。

对于.logoBar、#searchBar、.button，申请display: table-cell。

对于#searchBar，将宽度设置为 90%，这会强制所有其他元素计算缩小以适应宽度，搜索栏将展开以填充其余空间。

根据需要在表格单元格中使用 text-align 和 vertical-align。

查看演示：http://jsfiddle.net/audetwebdesign/zWXQt/

【讨论】：

尚未测试，但演示似乎正是我所需要的，谢谢！
嘿。因此，在引擎盖下，我们又回到了使用表格进行布局。 ;-)
@MichaelScheper 差不多，是的......直到他们在 CSS 标准中加入某种“星”符号表示“我希望 A 为 300px 宽，我希望 B 填充任何内容左”。
很多时候，Flexbox 是可能的......但也有很多时候，它不是。

【解决方案3】：

我知道回答这个问题已经很晚了，但我想它会帮助前面的任何人。

很好地使用 CSS3 FlexBox。它是可以实现的。将您的标题设为display:flex，并将其整个宽度分成 3 部分。在第一部分中，我放置了徽标、第二部分中的搜索栏和最后一部分中的按钮容器。将justify-content: between 应用于标题容器，将flex-grow:1 应用于搜索栏。而已。示例代码如下。

#header {
  background-color: #323C3E;
  justify-content: space-between;
  display: flex;
}

#searchBar, img{
  align-self: center;
}

#searchBar{
  flex-grow:1;
  background-color: orange;
  padding: 10px;
}

#searchBar input {
  width: 100%;
}

.button {
  padding: 22px;
}

.buttonsHolder{
  display:flex;
}

<div id="header" class="d-flex justify-content-between">
    <img src="img/logo.png" />
    <div id="searchBar">
      <input type="text" />
    </div>
    <div class="buttonsHolder">
      <div class="button orange inline" id="myAccount">
        My Account
      </div>
      <div class="button red inline" id="basket">
        Basket (2)
      </div>
    </div>
</div>

【讨论】：

【解决方案4】：

这可以通过将图像和搜索栏包装在它们自己的容器中并将图像以特定宽度向左浮动来实现。

这会使图像脱离“流”，这意味着以正常流呈现的任何项目都不会调整其位置以考虑到这一点。

要使“in flow”搜索栏正确显示在图像的右侧，请为其设置一个等于图像宽度加上排水沟的左侧填充。

效果是使图像具有固定宽度，而容器块的其余部分被搜索栏流畅地填充。

<div class="container">
  <img src="img/logo.png"/>
  <div id="searchBar">
    <input type="text" />
  </div>
</div>

和css

.container {
  width: 100%;
}

.container img {
  width: 50px;
  float: left;
}

.searchBar {
  padding-left: 60px;
}

【讨论】：

【解决方案5】：

我可能会做一些类似的事情

<div id='search-logo-bar'><input type='text'/></div>

用css

div#search-logo-bar {
    padding-left:10%;
    background:#333 url(logo.png) no-repeat left center;
    background-size:10%;
}
input[type='text'] {
    display:block;
    width:100%;
}

演示

http://jsfiddle.net/5MHnt/

【讨论】：

【解决方案6】：

将您的图片包含在searchBar div 中，它会为您完成任务

<div id="searchBar">
    <img src="img/logo.png" />                
    <input type="text" />
</div>

【讨论】：

【解决方案7】：

在查看了各地的许多潜在解决方案后，我做了一个快速实验。这就是我最终得到的结果：

http://jsbin.com/hapelawake

【讨论】：