Question

我有一个DIV（非固定高度），我想要一些 float 图像，我的网站的菜单，总是与底部的固定距离

代码是这样的：

<div class="header" id="header">

        <img src="img/aip.png" width="435" height="18" class="pageName"> <!--margin-top: 72px;-->
     <!--menu. Last item in line is 1st-->
        <img src="img/m-about.png" width="75" height="10"class="menu" >
        <img src="img/m-services.png" width="71" height="10"  class="menu"> 
        <img src="img/m-portraits.png" width="79" height="10"  class="menu"> 
        <img src="img/m-cosplay.png" width="65" height="10"  class="menu" > 
        <img src="img/m-concert.png" width="68" height="10"  class="menu" >  
 </div>

其中类“菜单”表示“float：right”并且包含 margin-top 参数，该参数从“标题”DIV的TOP设置菜单的位置。我通过JS调整每个调整大小来获得与底部相关的固定位置。这样做效果不好：因为封闭DIV的高度是可变的（以屏幕的百分比设置），我必须调用javascript来计算像素值并调整margin-top。它会导致令人讨厌的副作用和跳跃。

所以，相反，我需要一个纯CSS来设置与“标题”DIV底部相关的位置，而不是顶部。我该怎么办？

CSS：

 .menu {
float:right;
margin-top:0px; /* adjusted by JS later so menu items have certain margin-top*/
padding:8px; 
padding-top:10px; 
padding-bottom:10px;
cursor:pointer
}

.header {
display: table-row;
background-color:#181818;
min-height: 114px;
 height:10%;
}

Answer 1

工作原型

以下可能是实现此设计的一种方式：

HTML 可以是：

<div class="header" id="header">
     <img src="http://placekitten.com/500/20" width="435" height="30" class="pageName"> <!--margin-top: 72px;-->
    <!--menu. Last item in line is 1st-->
    <div class="nav-wrap">
      <img src="http://placekitten.com/100/10" width="68" height="10"  class="menu" >  
      <img src="http://placekitten.com/100/10" width="68" height="10"  class="menu" >  
      <img src="http://placekitten.com/100/10" width="68" height="10"  class="menu" >  
      <img src="http://placekitten.com/100/10" width="68" height="10"  class="menu" >  
      <img src="http://placekitten.com/100/10" width="68" height="10"  class="menu" >  
    </div>
</div>

我会将菜单/图像包装在一个包装中，然后相对于它绝对定位父容器.header使用 CSS ：

.menu {
    float:right;
    margin-top: 0px; /* adjusted by JS later so menu items have certain margin-top*/
    padding:8px; 
    padding-top:10px; 
    padding-bottom:10px;
    cursor:pointer
}

.header {
    background-color:#181818;
    min-height: 114px;
    height:10%;
    position: relative;
    min-width: 960px;
}
.nav-wrap {
    overflow: auto;
    position: absolute;
    right: 0;
    bottom: 0;
    display: inline-block;
}
.pageName {
    position: absolute;
    left: 10px;
    bottom: 10px;    
}

您可以向左或向右浮动图像或使用内联块

如果您希望.nav-wrap缩小以适应菜单项，请使用inline-block，否则block也可以使用。

对于.pageName，我会将其固定在左下角，如果需要，可以添加一些补偿。

我还会给.header一个最小宽度值，以确保各种图像不会缩小窗口大小时重叠。

演示小提琴：http://jsfiddle.net/audetwebdesign/vN3RQ/

Answer 2

我的建议是将菜单图像包装在一个div中（这就像在语义上有效的IMO一样），然后绝对定位：

HTML

<div id="header">
    <img height="18" width="435"/>

    <div id="menu" class="cf">
        <img height="10" width="75"/>
        <img height="10" width="71"/>
        <img height="10" width="79"/>
        <img height="10" width="65"/>
        <img height="10" width="68"/>
    </div>
</div>

CSS

img {
    border: 1px solid red;
}

#header {
    border: 1px solid blue;
    min-height: 150px;
    padding-bottom: 12px; /*note +2 for border, should be 10px really*/
    position: relative;
}

#menu {
    border: 1px solid green;
    position: absolute;
    right:0;
    bottom:20px;
}

#menu img {
    float: right;
}

.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

查看js fiddle here

微观明确修复N. Gallagher

如何相对于容器DIV的底部定位浮动物品？

2 个答案:

工作原型

HTML

CSS