Question

拜托，有人能帮忙吗？我需要将我的RH图像导航对齐，始终位于浏览器窗口的底部，无论窗口的大小如何调整。

我创建了一个父.container（max-width 800px）的流畅布局，里面有3个div：
- 顶部的Topmast
- 在topmast

下面的两个并排列div（66:33）

LH：主体是左对齐列，
RH：导航是右对齐列 - 我需要底部对齐

最后是一个Footer div（在主容器之外，跨越整个浏览器宽度）。

我的麻烦在于导航元素（4个翻转图像堆叠在一起）从不与浏览器的底部对齐，而是保持在div的顶部。

我试过以下的CSS都无济于事：
vertical-align：0 bottom：0 padding-bottom：0 margin-bottom：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;之类的内容将它们放在彼此旁边，这也将支持我看到您尝试使用的vertical-align: bottom;属性。

看看这个jsFiddle证明这一点。

请注意，我删除了您使用的很多样式，最重要的是float属性。

另请注意，我重新排列了html的顺序，以便导航部分不再位于主体之前，因为元素的浮动不再重新排列它们。

然后，我将display: inline-block;放在两个部分上，并将导航部分垂直对齐到底部。

底部对齐右侧div元素采用流体布局

1 个答案: