流體布局中的右對齊div元素底部對齊

Question

拜托，有人能幫忙嗎？ 無論窗口如何調整大小，我都需要將RH圖像導航調整為始終位於瀏覽器窗口的底部。

我創建了一個父容器的流暢布局（最大寬度800px），其中包含3個div：
-頂部的Topmast
-頂部下方有兩個並排的列div（66:33）

• LH：主體是左對齊的列，
• RH：導航欄右對齊-我需要底部對齊

最后是頁腳div（在主容器之外，跨越整個瀏覽器寬度）。

我的麻煩是導航元素（4個翻轉圖像彼此堆疊）永遠不會與瀏覽器底部對齊，而會停留在div頂部。

我嘗試了以下CSS都無濟於事：
垂直對齊：0底部：0填充底部：0邊緣底部：0
我更喜歡CSS解決方案，該解決方案也不需要為div指定固定高度。 有人可以幫忙嗎？ 我一直在尋找解決方案數周:(

由於我是新手，因此無法在此處發布自己擁有的圖像，因此我將嘗試在下面繪制它。 但是，這也是當前網站的屏幕截圖的鏈接，其中包含以下代碼：

http://hooboo.co.uk/Screengrab.jpg

得出來，我所擁有的是：

    -----800px container span-------------------------
    +----topmast-------------------------------------+
    +----2/3 width------------+ +----1/3 width-------+
    | mainbody                | |  navigation (4-row)|
    | that                    | |  that is short     | 
    | is                      | +--------------------+
    | tall                    |    
    |                         |
    +-------------------------+
    --------------------------------------------------
+--------footer 100% browser width-----------------------+

我需要的是：

    -----800px container span-------------------------
    +----topmast-------------------------------------+
    +----2/3 width------------+ 
    | mainbody                | 
    | that                    |  
    | is                      | +----1/3 width-------+
    | tall                    | |  navigation (4-row)|   
    |                         | |  that is short     |
    +-------------------------+ +--------------------+
    --------------------------------------------------
+--------footer 100% browser width-----------------------+

這是我的CSS：

.container {
width: 84%;
height: 100%;
max-width: 800px;
padding-left: 3%;
padding-right: 3%;
padding-top: 6%;
padding-bottom: 0%;
margin-bottom: 0%;
margin-left: auto;
margin-right: auto;
margin-top: auto; 
}

#topmast{ 
clear: both;
margin-left: 0;
margin-top: 25%;
height: auto;
width: 100%;
min-width: 240px;
min-height: auto;
display:block;
}


#navigation{ 
clear: right;
float:right;
width:33.125%;
height:600px; 
height:auto; 
max-width:265px;
vertical-align:bottom;
bottom: 0;
margin-bottom: 0;
padding-bottom: 0;
position:relative;
display:block;
}

#mainbody { 
clear: left;
margin-right:33.125%;
margin-top: 0%;
width: 65%;
display:block;
}

#footer { 
clear:both;
background-color:#333;
height:100px;
}

這是我的兩欄的html：

<div id="navigation" align="right" style="vertical-align:bottom">  

<a href="mailto:email@url.com" target="_blank"   
onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Email','','00_assets/buttons/00_BUTTONS_EMAILO.png',1)">
<img src="00_assets/buttons/00_BUTTONS_EMAIL.png" alt="Email: email@url.com" 
width="100%" height="auto" id="Email" border="0" style="float: right;"/>
</a>

<a href="tel:+1234567890" target="_blank" 
onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Call','','00_assets/buttons/00_BUTTONS_CALLO.png',1)">
<img src="00_assets/buttons/00_BUTTONS_CALL.png" alt="Call: +1234567890" 
width="100%" height="auto" id="Call" border="0" style="float: right;"/>
</a>

<a href="https://url.com/screenname" target="_blank" 
onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Twitter','','00_assets/buttons/00_BUTTONS_TWEETO.png',1)">
<img src="00_assets/buttons/00_BUTTONS_TWEET.png" alt="Tweet us" 
width="100%" height="auto" id="Twitter" border=0 style="float: right;"/>
</a>

</div>

<div id="mainbody" align="left"> 
<h1>Welcome to website</h1>
<p class="Body"> Mainbody copy about website services goes here.</p>
</div>

有人可以幫忙嗎？ 我不確定如何使用JsFiddle來發布演示。.網頁設計還是有點新的。.提前非常感謝。

Answer 1

您可以使用諸如display: inline-block;東西display: inline-block; 在您的元素上以將它們彼此並排放置，這也將支持vertical-align: bottom; 我看到您正在嘗試使用的財產。

看看這個jsFiddle演示了這一點。

請注意，我已經刪除了許多您正在使用的樣式，最重要的是float屬性。

還要注意，我重新排列了html的順序，以使導航部分不再位於主體之前，因為元素的浮動不再重新排列它們。

然后，我放置了display: inline-block; 在兩個部分上，並將導航部分垂直對齊到底部。