CSS填充剩余宽度

我有这个标题栏。CSS填充剩余宽度

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

来源

2013-09-23 Tom Hart

搜索栏填写div容器尚存差距，这是什么意思？ –

是的，这就是我之后的 –

如果你知道其他兄弟的（固定）宽度，你可以使用CSS3中的'calc（）'方法来指定搜索栏的宽度。否则，恐怕你可能不得不依靠JS来做到这一点。 – Terry

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

来源

2013-09-23 15:56:39

尚未测试，但演示似乎正是我所需要的，谢谢！ –

heh。因此，在发动机罩下，我们回过头来使用表格进行布局。 ;-) –

@MichaelScheper很多，是啊......直到他们在CSS标准中加入了某种“明星”符号才说：“我希望A宽度为300px，并且我希望B填充剩下的东西”。 – molson504x

包括在searchBar DIV你的形象，它会做的任务，为您

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

来源

2013-09-23 14:43:46

我可能会做沿着

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

东西线

with 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%; 
}

DEMO

http://jsfiddle.net/5MHnt/

来源

2013-09-23 14:54:15

-2

我在看一些到处都是潜在的解决方案后，做了一个快速的实验：在

观看演示。这是我结束了：

http://jsbin.com/hapelawake

来源

2015-01-05 04:32:40

使用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。

来源

2016-03-16 21:11:11

Sooo更简单！谢谢！ – Costa

方式比较好的答案，应该是接受的。 –

请注意，只要这只针对桌面设备，它在兼容性方面的表现会相当不错，但是有一些移动设备问题，在我写这篇文章时，全球可用的浏览器占82％。资料来源：http://caniuse.com/#search=calc –

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

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

要使“正在流动”的searchBar正确地位于图像的右侧，您需要给它一个与图像宽度相等的左填充以及一个阴影线。

其效果是使图像的宽度固定，而其余容器块则由搜索栏流畅填充。

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

来源

2016-12-04 18:48:53 Joe

CSS填充剩余宽度

回答

相关问题