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>

ここで、クラス「メニュー」には「float:right」と表示され、「ヘッダー」DIV の TOP からメニューの位置を設定するマージントップパラメータが含まれます。サイズ変更ごとにJSによる調整を介して、ボトムに関連する固定位置を達成します。これはうまくいきません: DIV を囲む高さは可変 (画面の % で設定) であるため、javascript を呼び出してピクセル値を計算し、margin-top を調整する必要があります。それは厄介な副作用とジャンプを引き起こします。

したがって、代わりに、「ヘッダー」DIV の上部ではなく下部に関連する位置を設定するには、純粋な CSS が必要です。どうすればいいですか？

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>

メニュー/画像をラッパーでラップし、 CSS.headerを使用して親コンテナーに対して絶対に配置します。

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

于 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フィドルを参照してください

N. Gallagher提供のマイクロ クリア フィックス

于 2013-06-18T22:06:23.907 に答える