2

現在、HTML5 ヘッダー タグ内に 3 つの div が並んでいます (左側 - 検索ボックス、中央 - ロゴ領域、右側 - ソーシャル メディア アイコン用の div)。

それは問題ないようですが、これらのdiv内の左右の要素を下に配置するのが難しく、左右のdivの両方がロゴ領域のサイズの影響を受けます。たとえば、ロゴの高さが x の場合、ロゴのサイズの高さが増加すると、左右の div がさらに下に押し出されます。

私が話していることをうまく説明するために、簡単な例を書きました.. http://jsfiddle.net/9patj/

誰かが助けることができれば、それは素晴らしいことです.

4

2 に答える 2

2

ヘッダー内で相対/絶対位置を試すことができます。

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のpositionタグとleft、right、bottomタグです。http://jsfiddle.net/9patj/10/を参照してください

于 2012-04-25T15:43:06.707 に答える
1

このような？

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

ポジションを追加する必要があります。

于 2012-04-25T15:46:11.557 に答える