3

高さを知らずに要素をコンテナの底に揃えるにはどうすればよいですか? 「リンク」の div コンテナを下に揃えて、ロゴ テキストの下の横に揃えたいと考えています。ユーザーはロゴのサイズを変更でき、画像である可能性があるため、高さを設定できません...

コードは次のとおりです。

<div class="wrapper">
    <div class="logo">
        <a href="#">LOGO HERE</a>
    </div>

    <div class="links">
        <a href="#">LINK 1</a>
        <a href="#">LINK 2</a>
        <a href="#">LINK 3</a>
    </div>
</div>

.wrapper { width:100%; -moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
.logo { width:75%;float:left;font-size:100px;}
.links { width:25%;float:left;position:relative;}

http://jsfiddle.net/Lejpr/

Twitter Bootstrap フレームワークを使用していることを追加する必要があるため、私の場合、ロゴとリンクのコンテナーは両方とも、Bootstrap が float:left を適用する列です。私はこれが反応する必要があるので、絶対位置を使用することは私にとっては現実的ではないかもしれません.

4

3 に答える 3

2

.links要素を下に垂直に揃えるには、ドキュメントの通常のフローから削除する必要があります。とに aposition: relativeを追加します。.wrapperposition: absolute.links

.logo要素をフロートする必要はありません。しかし、それが必要な場合。overflow: hidden;その親に css 宣言を追加します。この場合.wrapper。

また、要素に設定margin-rightして.logo、近くに正しく表示することもできます.links

CSS:

.wrapper {
    width:100%;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    background-color: gold;
    position: relative;
}

.logo {
    font-size:100px;
    margin-right: 25%;
}

.links {
    width:25%;
    background-color: orange;
    position: absolute;
    bottom: 0;
    right: 0;
}

JSFiddleデモ

于 2013-08-08T18:34:41.927 に答える
1

inline-block と vertical-align プロパティの使用

絶対配置を使用する代わりに、次の方法があります。

.wrapper {
    width:100%;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    outline: 1px solid blue; /* for demo only*/
}
.logo {
    width:74%; /* allow 1% for any white space between logo and links */
    font-size:100px;
    outline: 1px solid blue; /* for demo only*/
    display: inline-block;
    vertical-align: bottom;
}
.links {
    width:25%;
    position:relative;
    outline: 1px solid blue; /* for demo only*/
    display: inline-block;
}

デモ フィドル: http://jsfiddle.net/audetwebdesign/YbqUz/

インライン ブロックは十分にサポートされているため、これは実行可能なオプションになる可能性があります。

狭い画面幅にレイアウトをどのように対応させたいかによって、リンク ブロックの最小幅を設定したい場合があります。

于 2013-08-08T18:40:43.750 に答える
0

.links内部に配置して.logo、相対位置と絶対位置を組み合わせて使用​​してみてください。

ここでフィドル

次のスタイルを使用する.linksと、div が div の下部に配置され.logo、画面幅の残りの 25% が埋められます。

.links { 
 width:30%;
 float:left;
 position:absolute; 
 font-size: 14px;
 right: -30%; 
 bottom: 0;
}
于 2013-08-08T18:32:33.217 に答える