0

我有一个 DIV（高度不固定），我想要一些浮动图像（我的网站的菜单）始终位于距DIV底部固定距离的位置。

代码是这样的：

<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>

其中“menu”类表示“float:right”并且包含margin-top参数，该参数设置菜单从“标题”DIV的顶部开始的位置。我通过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%;
}
4

2 回答 2

0

工作原型

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

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, elseblock也可以。

对于.pageName，我会将其固定在左下角，如果需要，添加一些偏移量。

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

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

于 2013-06-18T22:02:10.793 回答
0

我的建议是将菜单图像包装在一个 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

由N. Gallagher提供的微清除修复

于 2013-06-18T22:06:23.907 回答