在兩個固定寬度的元素之間將未知寬度拉伸元素

前言：我通常不是UI用戶，所以如果我對CSS有嚴重的誤解，請原諒我。請知道這個問題的是以下幾個小時的研究/敲我的頭靠在牆上:)在兩個固定寬度的元素之間將未知寬度拉伸元素

基本上我想要做的就是伸展的未知號元素融入未知寬度的空間，在一個已知的寬度的兩個元素之間，所有內部都是一個寬度可變的容器，位於頁面的中心。

我意識到多麼瘋狂，所有聽起來我打字，所以讓我嘗試做這個圖形：

html 
|-------------------------------------------------------------------------| 
| #container               | 
| |-----------------------------------------------------------------| | 
| |#header               | | 
| ||---------------------------------------------------------------|| | 
| || #logo | #menu          | #social || | 
| ||   | |---| |---| |---|     |---| |   || | 
| ||   | | A | | B | | C | ... ... ... | N | |   || | 
| ||   | |---| |---| |---|     |---| |   || | 
| ||---------------------------------------------------------------|| | 
| |                 | | 
| |#body               | | 
| ||---------------------------------------------------------------|| | 
| ||                || | 
| ||---------------------------------------------------------------|| | 
|-------------------------------------------------------------------------|

其中：

#container爲中心，並佔據了80％文檔的寬度
#logo,#menu和#social各自包含在<div/> s
#logo和#social已知寬度; #menu不
| A | ... | N |不到<ul/>

的HTML看起來像一個未知的數量<li/>元素：

<body> 
    <div id="container"> 
     <div id="header"> 
      <div id="logo">Logo here</div> 

      <div id="nav"> 
       <ul> 
        <li><a href="#">Home</a></li> 
        <li><a href="#">Home</a></li> 
        <li><a href="#">Home</a></li> 
       </ul> 
      </div> 

      <div id="social"><a href="#">Link</a><a href="#">Link</a></div> 

     </div> 
     <div id="body">&nbsp;</div> 
    </div> 
</body>

嘗試，因爲我可能，我不能得到A..N菜單項目可以穿過#logo和#social元素之間的其餘空間。他們最終會一起擦肩而過，或者他們佔據了#container分配給他們的80％的100％。

我已經嘗試了一些事情：

使用display: inline-table;（fiddle）
顯示<li/>元件內聯的，並給予#menu元件的100％（fiddle）
一束的寬度這些變化

我不能/不會考慮做的事情：

房屋的菜單項在<table/>
任何類型的JavaScript方式
的使用CSS calc()功能

而最後一個音符：我不關心這些菜單項不在分配給他們的空間中有足夠的空間。但是，如果它們溢出，我預計它們會溢出到#menu內的另一行（即在A菜單項下）。

必須有一個純粹的CSS解決方案...這是什麼？

來源

2013-10-23 Thomas Kelley

你是對的，不想使用<table>元素，因爲它沒有語義..但這就是爲什麼CSS有一組屬性，爲了讓元素看起來像表格元素，同時保留它們的語義含義。

基本上，如果你設置一個容器元素display: table;，然後你可以設置子元素要麼display: table-row;或display: table-cell;

這是什麼意思你？

那麼，一組表格單元格將始終填充到父級的100％寬度，以及父級的100％高度，這通常由最大的子級確定，除非明確設置。

因此，考慮到這一點，如果你要你的頭元素設置#header到display: table;，然後你可以設置#logo，#nav和#social到display: table-cell;。在徽標和社交塊上設置固定寬度將得到尊重，並因此導致導航塊填充剩餘空間。

導航塊內的無序列表ul可以充當第二個容器..再次設置爲display: table;，允許其內容填充到導航塊的全部寬度。只需將li元素設置爲display: table-cell;，並且您應該具有預期的效果。

看到這個演示：

http://jsfiddle.net/5RvCC/

表單元格樣式元素的一個很好的好處是，它們允許vertical-align特性，這使得垂直居中超級容易，這似乎總是一個共同的題。

來源

2013-10-23 03:23:11

我從來沒有想過要使用表格佈局顯示整個標題。這個解釋非常有意義......非常感謝！你是一個救星！ –

在兩個固定寬度的元素之間將未知寬度拉伸元素

回答

相關問題