फ्लोट "संपादित करें" शीर्षक के दाईं ओर लिंक (टैग ब्लॉक शीर्षक रखना चाहिए)

Question

को देखते हुए निम्नलिखित एचटीएमएल

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

मैं पता लगाना एक कठिन समय हो रही है H1 टैग के दाईं ओर "संपादन" लिंक कैसे फ़्लोट करें, लेकिन एच 1 टैग को ब्लॉक तत्व के रूप में रखें ताकि उसकी अंडरलाइन (सीमा-नीचे)

क्या कोई मुझे कुछ सलाह दे सकता है ... इससे पहले? अग्रिम में धन्यवाद

Answer 1

इसे प्राप्त करने के लिए विभिन्न रणनीतियां हैं। आप या तो एक फ्लोट को ठीक करने के लिए एक कंटेनर तैर सकते हैं या फ्लोट को साफ़ करने के लिए जेनरेट की गई सामग्री का उपयोग कर सकते हैं। मैं डब्ल्यू/कोड दोनों को समझाने की कोशिश करूंगा। दोनों के लिए आप अपना मार्कअप रख सकते हैं, लेकिन एच 1 से अंडरलाइन को हेडर क्लास में ले जाने की आवश्यकता है। फिर बाईं ओर हेडर को फ़्लोट करें, दाईं ओर संपादित करें और .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%; } 

imho अच्छे समाधान सीएसएस के द्वारा निर्मित सामग्री का विरोध तैरता स्पष्ट करने के लिए उपयोग करने के लिए है कंटेनर। लेकिन ध्यान रखें कि इससे कम सीएसएस सक्षम ब्राउज़र संस्करणों पर परेशानी होगी।

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/ देखते हैं। दूसरी विधि http://www.positioniseverything.net/easyclearing.html में प्रलेखित है।