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填充剩餘寬度

回答

相關問題