將父寬度設置爲底部對齊的子寬度

Question

我試圖將div元素的寬度設置爲其最長子元素的寬度，在這種情況下恰好是我想要鎖定到底部的d​​iv母公司。我還沒有使用父固定高度，因爲我不知道孩子有多大需

這裏是我的HTML/CSS：

HTML：

<div id ="header-right"> 
    <div id="content1"></div> 
    <div id="footer"></div> 
</div> 

CSS ：

#header-right{ 
    background-color: red; 
    position: relative; 
    display: inline-block; 
    height: 300px; /*The actual width is unknown, this is just for example*/ 
} 
#content1{ 
    background-color: blue; 
    width: 200px; 
    height: 100px; 
} 
#footer{ 
    background-color: cyan; 
    position: absolute; 
    bottom: 0; 
    width: 300px; /*Also an unknown value*/ 
    height: 25px; 
} 

你可以看看這個jfiddle看看會發生什麼： https://jsfiddle.net/rkdqp9m5/2/

你可以看到容器div忽略頁腳，因爲它是絕對定位的。

但是，如果我不使用絕對定位頁腳，那麼我不能頁腳鎖定到div的底部，你可以在這個jfiddle看到 https://jsfiddle.net/rkdqp9m5/3/

我要鎖定的頁腳容器的底部，但我也希望父級的寬度基於頁腳。我不想爲此使用表格，而且我不想使用固定的寬度或高度，因爲容器和頁腳的尺寸將基於我不知道寬度的圖像。

編輯：我也想保持這種嚴格的HTML/CSS，如果可能的話

Answer 1

如果你用的瀏覽器flexbox要求OK，你可以這樣做：

#header-right { 
 
    background-color: red; 
 
    padding: 20px 0px 0px 0px; 
 
    height: 300px; 
 
    display: inline-flex; 
 
    flex-direction: column; 
 
    justify-content: space-between; 
 
} 
 
#content1 { 
 
    background-color: blue; 
 
    width: 200px; 
 
    height: 100px; 
 
    align-self: flex-start; 
 
} 
 
#footer { 
 
    background-color: cyan; 
 
    width: 300px; 
 
    height: 25px; 
 
    align-self: flex-end; 
 
}

<div id="header-right"> 
 
    <div id="content1"></div> 
 
    <div id="footer"></div> 
 
</div>

JSFIDDLE DEMO了所有必要的供應商前綴。

Answer 2

這是否幫助：Relative parent DIV to inherit the width of absolute child DIV

它所表明的是，你不能用純CSS，但你可以使用Javascript來實現你想要做的事情。