如何在不使用絕對值的情況下使一列的寬度增加兩倍？

實施例：如何在不使用絕對值的情況下使一列的寬度增加兩倍？

<table width="500"> 
    <tr> 
     <td width="50">1</td> 
     <td width="100%">2</td> 
     <td width="100">3</td> 
    </tr> 
</table>

如果我沒有錯，如果一個寬度被給定爲一個百分比，它是剩餘寬度總寬度的父元素，而不是的百分比的的百分比，對嗎？

好的，很好，那麼當我們混合百分比和像素寬度時會發生什麼？在上面的例子中，列2 takes up as much space as it can，並擠壓1和2對邊但它不會隱藏它們;即使設置了overflow:hidden，它也允許他們有足夠的空間顯示其內容。

如果代之以我們的change column 2 to 10%，百分比似乎優先考慮，但它似乎仍然尊重1和3的比例--3仍然是1的兩倍，即使確切的寬度不符合規定。

那麼，如果我們想要設置2個列，並讓第3列填充剩餘空間呢？簡單！完全是omit the value。

很好，但是如果我們想要將一列設置爲明確的像素寬度，並且第二個是第三個寬度的兩倍以填充剩餘空間呢？這甚至可能在HTML/CSS？

sample fiddle

來源

2011-03-10 mpen

啊，一個謎！我喜歡'：）' – 2011-03-10 02:12:18

順便說一句，根據HTML5規範，TD元素的寬度屬性已過時，* [「不能由作者使用]（http://www.w3.org/TR/html5/obsolete的.html＃不符合要求的功能）*。 – 2011-03-10 02:17:30

@Sime：這不重要。我可以用CSS輕鬆設置它們，它們的行爲也是一樣的。 – mpen 2011-03-10 02:19:54

這似乎在Chrome中工作，而不是IE或邊緣：

<table style="width: 500px;"> 
    <tr style="display: flex;"> 
     <td style="width: 50px;">1</td> 
     <td style="flex-grow: 2;">2</td> 
     <td style="flex-grow: 1;">3</td> 
    </tr> 
</table>

然而，隨着<div>出現在Chrome工作與邊緣：

<div style="width: 500px; display: flex;"> 
    <div style="width: 50px;">1</div> 
    <div style="flex-grow: 2;">2</div> 
    <div style="flex-grow: 1;">3</div> 
</div>

我沒有使用過多的flex，但我相信flex-grow之後的數字是flex元素中每個元素所佔用的剩餘空間量ENT。

編輯： Flexbox佈局目前在W3C Candidate Recommendation中。你可以閱讀更多關於here。

來源

2016-05-11 18:21:21

如何在不使用絕對值的情況下使一列的寬度增加兩倍？

回答

相關問題