css - CSS fill remaining width

Question

I have this header bar.

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

I need the searchBar to fill whatever the remaining gap is in the div. How would I do this?

Here's my 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;
}

score 71 · Accepted Answer

使用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在外部元素上设置。

score 61 · Accepted Answer

您可以使用 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/

score 10 · Accepted Answer

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

很好地使用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>

score 3 · Accepted Answer

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

这会将图像从“流”中取出，这意味着在正常流中渲染的任何项目都不会调整它们的位置以考虑到这一点。

要使“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;
}

score 1 · Accepted Answer

将您的图像包含在searchBardiv 中，它将为您完成任务

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

score 1 · Accepted Answer

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

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

score -2 · Accepted Answer

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

http://jsbin.com/hapelawake

css - CSS fill remaining width

7 回答 7

Related

Reference