CSS 填充剩余宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18961918/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS fill remaining width
提问by TMH
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?
我需要 searchBar 来填充 div 中剩余的任何空白。我该怎么做？
Here's my CSS
这是我的 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;
}
回答by Isaiah Turner
Use calc!
使用calc！
https://jsbin.com/wehixalome/edit?html,css,output
https://jsbin.com/wehixalome/edit?html,css,output
HTML:
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:
CSS：
.left {
display: inline-block;
width: 100px;
background: red;
color: white;
}
.right {
display: inline-block;
width: calc(100% - 100px);
background: blue;
color: white;
}
Update: As an alternative to not having a space between the divs you can set font-size: 0on the outer element.
更新：作为在 div 之间没有空格的替代方法，您可以font-size: 0在外部元素上设置。
回答by Marc Audet
You can realize this layout using CSS table-cells.
您可以使用 CSS table-cells 来实现这种布局。
Modify your HTML slightly as follows:
稍微修改您的 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>
Just remove the wrapper element around the two .buttonelements.
只需移除两个.button元素周围的包装元素即可。
Apply the following CSS:
应用以下 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;
}
Apply display: tableto .containerand give it 100% width.
适用display: table于.container并给它100％的宽度。
For .logoBar, #searchBar, .button, apply display: table-cell.
对于.logoBar, #searchBar, .button, 申请display: table-cell。
For the #searchBar, set the width to 90%, which force all the other elements to compute a shrink-to-fit width and the search bar will expand to fill in the rest of the space.
对于#searchBar，将宽度设置为 90%，这会强制所有其他元素计算缩小以适应宽度，搜索栏将扩展以填充其余空间。
Use text-align and vertical-align in the table cells as needed.
根据需要在表格单元格中使用文本对齐和垂直对齐。
See demo at: http://jsfiddle.net/audetwebdesign/zWXQt/
回答by Joe
This can be achieved by wrapping the image and search bar in their own container and floating the image to the left with a specific width.
这可以通过将图像和搜索栏包裹在它们自己的容器中并将图像以特定宽度向左浮动来实现。
This takes the image out of the "flow" which means that any items rendered in normal flow will not adjust their positioning to take account of this.
这会将图像从“流”中取出，这意味着在正常流中呈现的任何项目都不会调整它们的位置来考虑这一点。
To make the "in flow" searchBar appear correctly positioned to the right of the image you give it a left padding equal to the width of the image plus a gutter.
为了使“in flow”searchBar 正确显示在图像的右侧，您可以给它一个等于图像宽度加上装订线的左填充。
The effect is to make the image a fixed width while the rest of the container block is fluidly filled up by the search bar.
效果是使图像具有固定宽度，而容器块的其余部分由搜索栏流畅地填充。
<div class="container">
<img src="img/logo.png"/>
<div id="searchBar">
<input type="text" />
</div>
</div>
and the css
和 CSS
.container {
width: 100%;
}
.container img {
width: 50px;
float: left;
}
.searchBar {
padding-left: 60px;
}
回答by Abhishek Tewari
I know its quite late to answer this, but I guess it will help anyone ahead.
我知道回答这个问题为时已晚，但我想这会对前面的任何人有所帮助。
Well using CSS3 FlexBox. It can be acheived.
Make you header as display:flexand divide its entire width into 3 parts. In the first part I have placed the logo, the searchbar in second part and buttons container in last part.
apply justify-content: betweento the header container and flex-grow:1to the searchbar.
That's it. The sample code is below.
很好地使用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>回答by Sid M
Include your image in the searchBardiv, it will do the task for you
将您的图像包含在searchBardiv 中，它会为您完成任务
<div id="searchBar">
<img src="img/logo.png" />
<input type="text" />
</div>
回答by 3066d0
I would probably do something along the lines of
我可能会做一些类似的事情
<div id='search-logo-bar'><input type='text'/></div>
with css
用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
演示
回答by Anthony Tambrin
I did a quick experiment after looking at a number of potential solutions all over the place. This is what I ended up with:
在查看了许多潜在的解决方案后，我做了一个快速的实验。这就是我最终的结果：
