HTML CSS：下部に3つのdivと要素を整列する

Question

現在、HTML5ヘッダータグ内に3つのdivがあります（左側に - 検索ボックス、中央 - ロゴ領域、右側にdiv - ソーシャルメディアアイコンの場合）。

しかし、私はこれらのdiv内の左右の要素を下に配置し、左右のdivがロゴ領域のサイズの影響を受けるのが難しいです。たとえば、自分のロゴがx高さだった場合、ロゴのサイズの高さが増すにつれて、左と右のdivをさらに押し下げてしまいます。誰が助けることができれば、私はうまくいけば、私が話しているものを説明するための簡単な例を書いた

.. http://jsfiddle.net/9patj/

、それはそれが達成されたか、私を歩くには大きな、おそらくボーナスだろう本当に感謝しています。

Answer 1

ヘッダー内で相対/絶対配置を試すことができます。 CSSについては

、あなたは試してみてください：

header { 
    margin: 0px 29px 29px 29px; 
    background: #CCC; 
    width:960px; 
    height: 160px; 
    vertical-align: bottom; 
    display: table-cell; 
    position: relative; 
} 

#search { 
    float:left; 
    width:215px; 
    background-color:red; 
    position: absolute; 
    bottom: 0px; 
    left: 0px; 
} 

#social { 
    float:right; 
    width:215px; 
    background-color:yellow; 
    position: absolute; 
    bottom: 0px; 
    right: 0px; 
} 

#logo { 
    float:center; 
    text-align:center; 
    position: absolute; 
    bottom: 0px; 
    left: 50%; 
} 

ヘッダに相対的な位置を設定することで、あなたは絶対位置にその子要素のそれぞれを設定することができます。これにより、各子要素をヘッダーの下部に配置することができます。

重要な部分は、位置 CSSタグであり、は、右と下タグを残しました。 http://jsfiddle.net/9patj/10/

Answer 2

を参照してください。あなたがポジションを追加する必要が

http://jsfiddle.net/9patj/9/

。