如何讓孩子只用CSS自動適應父母的寬度？

我有一個服務器端組件，使用DIV生成一個流體佈局「工具欄」，沒有固定的寬度，在它內部生成了很多A。如何讓孩子只用CSS自動適應父母的寬度？

然後，我需要自定義該佈局以使所有A標籤自動適合父級寬度。但是，孩子的數量是可變的，父母的寬度是不知道的（它自動適應窗口）。

我做了一些測試，這個小提琴：http://jsfiddle.net/ErickPetru/6nSEj/1/

但我不能找到一種方法，使其動態（取消註釋最後A標籤來看看它是如何工作的ins't，大聲笑）。

我無法更改服務器端源以固定寬度格式化HTML。我真的想用CSS解決它，如果有什麼辦法的話，甚至可以用JavaScript來實現這個結果。

我該如何讓所有孩子自動適應父母的寬度而不受孩子數量的影響？

來源

2011-05-02 Erick Petrucelli

我敢肯定，這不能用CSS嚴格完成，所以（如果我是正確的），你有一點JavaScript來灑。 – 2011-05-02 14:04:12

這是我的恐懼。也許CSS3和HTML5可以做些什麼...或不？ – 2011-05-02 14:11:24

如果您願意放棄對IE7的支持，您可以輕鬆使用CSS來完成。 [你關心IE7嗎？]（http://gs.statcounter.com/#browser_version-ww-monthly-201004-201104）一個好主意是做我的神奇選擇，用JavaScript解決方法<= IE7 – thirtydot 2011-05-02 16:40:30

這已經是一個相當古老的問題。雖然當時給出的答案很好，但現在Flexible Box Layout提供了相同的結果，更簡單，good support在所有的現代瀏覽器。我強烈推薦它！

/* Important parts */ 
 
.parent { 
 
    display: flex; 
 
} 
 

 
.parent a { 
 
    flex: 1; 
 
} 
 

 
/* Decoration */ 
 
.parent { 
 
    padding: 8px; 
 
    border: 1px solid #ccc; 
 
    background: #ededed; 
 
} 
 

 
.parent a { 
 
    line-height: 26px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    border: 1px solid #ccc; 
 
    background: #dbdbdb; 
 
    color: #111; 
 
}

<div class="parent"> 
 
    <a href="#">Some</a> 
 
    <a href="#">Other</a> 
 
    <a href="#">Any</a> 
 
</div> 
 

 
<br> 
 

 
<div class="parent"> 
 
    <a href="#">Some</a> 
 
    <a href="#">Other</a> 
 
    <a href="#">Any</a> 
 
    <a href="#">One More</a> 
 
    <a href="#">Last</a> 
 
</div>

來源

2016-09-23 12:30:33

現在很多人都用jQuery來解決這個問題。所有你需要的是一條線。這是你的小提琴。

$("div.parent a").css("width", (($("div.parent").width()/$("div.parent a").length) -2) + "px");

來源

2011-05-02 14:45:06 ppumkin

這對於重新調整尺寸不太合適。 – Marcel 2014-09-03 00:56:44

您可以使用display: table-cell：

參見：http://jsfiddle.net/6nSEj/12/（or with 5 children）

這不會在IE7中工作，因爲該瀏覽器根本不支持display: table和朋友。

div.parent { 
    .. 
    width: 100%; 
    display: table; 
    table-layout: fixed; 
} 
div.parent a { 
    .. 
    display: table-cell; 
}

來源

2011-05-02 21:39:24 thirtydot

現在IE7的市場份額不足4％（至少在我的國家是這樣），我相信這是最好的選擇，因爲它只能用CSS解決問題。 – 2012-09-27 14:25:00

@thirtydot Dude，這是一個史詩般的解決方案！在許多情況下非常有用。謝謝！ – Mahdi 2015-03-18 07:21:25

如何讓孩子只用CSS自動適應父母的寬度？

回答

相關問題