2016-12-13 9 views
0

(重複)の右下にを配置しようとしています。難しい部分はmax-widthの1280ピクセルを#header-supporter-contに設定して残りのサイトマージンと一貫性を持たせることです。親の中で絶対最大幅のある絶対的な要素

私は#header内で直接を配置しようとしたが、その後、私は全角であることをmax-width#header-imageためのニーズを使用することはできません。

<header id="header"> 
    <div id="header-image"> 
     <a href="#"><img src="http://placeholdit.imgix.net/~text?txtsize=44&txt=Header&w=1920&h=200" /></a> 
    </div> 
    <div id="header-supporter-cont"> 
     <div id="header-supporter"> 
     <div> 
      Lead Supporter 
     </div> 
     <img src="http://placeholdit.imgix.net/~text?txtsize=14&w=65&h=65" /> 
     </div> 
    </div> 
    </header> 

がここにペンの:http://codepen.io/ourcore/pen/ObBWaY

は、ここに私のマークアップです。

+0

上の最大幅を有する理由は何ヘッダーのサポート? – Adjit

+0

要素が別の要素との相対的な位置を取るようにするには、相対的な親の**子要素**である必要があります。 HTMLを再構成する必要があります。 –

+0

@Adjit私は単に「右:0」と言うことができ、それはサイトマージンの残りの部分と整列し、画面の端には行きません。 –

答えて

1

位置をsetted#ヘッダ・サポーターに代えてトップの#ヘッダ支持-CONTに相対的、及び底

http://codepen.io/anon/pen/ENdWgE

#header-supporter-cont { 
    margin: 0 auto; 
    max-width: 1280px; 
    position: relative; 

    #header-supporter { 
    position: absolute; 
    bottom: 0; 
    right: 0; 
    } 
+0

良いアイデア。ありがとう! –

+0

私はあなたが底にそれが欲しい、今は正解です気にしなかった:) – Alex

関連する問題