フロート見出しの右にある「編集」リンクを

Question

は、次の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> 

と私は考え出す厳しい時間を過ごしてい

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 { } 

次のCSSを考える（タグブロックを見出しておく必要があります）どのようにh1タグの右に "編集"リンクをフロートさせるが、下線（ボーダーボトム）を持つようにブロック要素としてh1タグを維持する

誰かが私にいくつかのアドバイスを提供することができます...完了これの前に？事前にありがとう

Answer 1

これを達成するためのさまざまな戦略があります。フロートを修正するためにコンテナをフロートさせるか、生成されたコンテンツを使用してフロートをクリアすることができます。 w/codeの両方を説明しようとします。どちらの場合も、マークアップは保持できますが、下線をh1から.headerクラスに移動する必要があります。その後、ヘッダーを左に浮かべ、右に編集し、.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%; } 

よりよい解決策は、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%; } 

は、エリック・マイヤーの記事http://www.complexspiral.com/publications/containing-floats/を参照してください。 2番目の方法はhttp://www.positioniseverything.net/easyclearing.htmlに記載されています。