6

次のhtmlが与えられた場合

<div class="module">           
            <div class="header">
                <h1>Test Heading</h1>
                <a href="">edit</a>
            </div>
            <div class="body">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eu lacus at augue tristique dignissim. Nunc vitae porta lorem. Nullam eu nunc sit amet arcu dictum convallis. Vestibulum quis purus quis sem rhoncus imperdiet eget at nisl. Fusce non metus libero, vel viverra purus. Quisque ullamcorper congue risus vel adipiscing. Quisque vehicula ante in quam malesuada at porta diam gravida. Aenean sagittis, ipsum eget egestas malesuada, turpis neque aliquam metus, lobortis congue ligula nisi quis purus. Integer nec dui et elit suscipit ultrices et sit amet enim. Nulla euismod commodo metus, eget luctus urna dignissim in.</p>
            </div>
        </div>

そして次のcss

body { font-family: Helvetica, Arial, "Lucida Sans Unicode", Tahoma, Verdana, Arial, Helvetica, sans-serif; }
            h1 { margin: 0; padding: 0; border-bottom: 3px solid #333333; color: #333333; font-size: 40px; font-weight: normal; letter-spacing: 0; line-height: 1.3em; }

            .module { }
                .module .header h1 { }
                .module .header a { }

「編集」リンクをh1タグの右側にフロートさせる方法を理解するのに苦労していますが、h1タグをブロック要素として保持して、下線（border-bottom）を付けます

誰かアドバイスをくれませんか...以前にこれをやったことがありますか? 前もって感謝します

4

1 に答える 1

7

これを達成するためのさまざまな戦略があります。コンテナーをフロートしてフロートを修正するか、生成されたコンテンツを使用してフロートをクリアすることができます。コードで両方を説明しようとします。両方ともマークアップを保持できますが、下線を h1 から .header クラスに移動する必要があります。次に、ヘッダーを左にフロートし、右に編集し、.header クラスもフロートしてフロートを修正します。この手法には、後に続くものに依存するという欠点がありますが、分離されたコード片に対しては機能します。

h1 {
    margin: 0;
    padding: 0;
    color: #333333;
    font-size: 40px;
    font-weight: normal;
    letter-spacing: 0;
    line-height: 1.3em;
}

.header { border-bottom: 3px solid #333333; }
.module .header h1 { float: left; }
.module .header a { float: right; }
.module .header { float: left; width: 100%; }

より良い解決策は、.header コンテナーをフロートする代わりに、CSS で生成されたコンテンツを使用して反対のフロートをクリアすることです。ただし、CSS に対応していないブラウザー バージョンでは問題が発生することに注意してください。

h1 {
    margin: 0;
    padding: 0;
    color: #333333;
    font-size: 40px;
    font-weight: normal;
    letter-spacing: 0;
    line-height: 1.3em;
}

.header { border-bottom: 3px solid #333333; }
.header:after { content: "."; display: none; clear: both; }
.module .header h1 { float: left; }
.module .header a { float: right; }
.module .header { width: 100%; }

最初の方法の詳細については、Eric Meyer の記事http://www.complexspiral.com/publications/containing-floats/を参照してください。2 番目の方法は、http://www.positioniseeverything.net/easyclearing.htmlに記載されています。

于 2009-10-15T20:52:41.353 に答える