1

先日この質問をしましたが、必要な解決策を得ることができませんでした...

ロゴ領域の両側にある検索ボックスとソーシャルメディアアイコンをヘッダーの下部（灰色のセクション）に揃えたいと思います。これは、サイトのユーザー/クライアントがロゴを自分のものと交換したい場合、その高さに関係なく、検索ボックスとソーシャルメディア領域がヘッダーの下部に合うようにプッシュするためです。

これが私が得ようとしているものの簡単な例です：http： //jsfiddle.net/AeRc8/

誰かがこれがjsfiddle内でどのように行われるかを説明することによって助けてくれるなら、それは大いにありがたいです。

4

3 に答える 3

1

のようなものはありませんfloat:center;。詳細については、MDN ドキュメントを参照してください。

vertical-alignインラインコンテキストMDN Dokuでのみ動作します

あなたができることは、これらの2つの要素を次のように絶対に配置することです:

#search{
   position:absolute;
   left:0;bottom:0;
}

#search{
   position:absolute;
   right:0;bottom:0;
}

position:absolute;以外の位置にある最初の祖先要素に依存するため、これを機能させるには、コンテナー要素 (この場合は)staticに適用する必要があります。position:relative;header

于 2012-04-26T13:48:33.737 に答える
1

コンテナ内にプッシュしたいすべての要素を配置し、次のようにヘッダーの下部に絶対に配置できます。

header {
    margin: 0px 29px 29px 29px;
    background: #CCC;
    display:block;
    position:relative;
}

.section {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
}

このようにして、そのセクション内に配置する要素をより細かく制御できます。

デモ: http://jsfiddle.net/AeRc8/2/

于 2012-04-26T13:48:47.270 に答える
1

jsfiddle の例を編集したバージョンを次に示します。

http://jsfiddle.net/Shedal/AeRc8/1/

要素と#search および #social 要素に適用position: relativeし、左下隅と右下隅に対応する配置規則を適用しました。<header>position: absolute

そしてもちろん、 と を削除float: leftしfloat: rightました。これは、この効果が絶対配置で実現されるようになったためです。

于 2012-04-26T13:45:38.093 に答える