फ़्लोटिंग तत्व <br clear="both"/> एक बेहतर सीएसएस तरीके से?

मेरे पास कुछ फ़्लोटिंग तत्व हैं जो एक साइडबार की तरह हैं जो एक सामग्री क्षेत्र के अलावा तैरते हैं। अगर मैं साइडबार के अंत में <br clear="both"/> नहीं जोड़ता, तो पृष्ठभूमि के पाद लेख और भाग अजीब चलते हैं।फ़्लोटिंग तत्व <br clear="both"/> एक बेहतर सीएसएस तरीके से?

किसी भी त्वरित समाधान के बारे में सोचने के लिए मुझे याद आया?

धन्यवाद।

संपादित करें: उदाहरण के लिए, मैं चाहता हूं कि सीमाओं के पास कोई अंतराल न हो और पृष्ठभूमि में कोई स्थान न हो। साथ साइडबार 2) पाद लेख 1) सामग्री

<!DOCTYPE html> 

<html lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>layout</title> 

    <style type="text/css"> 

    body { 
     margin:0; 
     padding:0; 
    } 

    #main { 
     background:#cfcfcf; 
    } 

    .inner { 
     margin: 0 auto; 
     padding: 96px 72px 0; 
     width: 1068px; 
     border-color: #000; 
     border-style: solid; 
     border-width: 0 1px; 
     color: #3C3C3C; 
    } 

    .post { 
     width: 705px; 
     background:#999; 
     float:left; 
    } 

    #comments, #respond { 
     background:#999; 
    } 

    #sidebar { 
     background:#777; 
    } 

    #footer { 
     clear:both; 
     background:gray; 
    } 

    </style> 
</head> 
<body> 

    <div id="main"> 

     <div class="inner"> 

      <div id="post" class="post"> 

       <h2>Lorem Ipsum Test Page</h2> 

       <div class="entry"> 

        <p>Lorem ipsum sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> 

        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> 

       </div> <!-- entry --> 

      </div> <!-- post --> 

      <div id="sidebar"> 

       <h2>Meta</h2> 
        <ul> 
         <li>Login</li> 
         <li>Anything</li> 
        </ul> 

       <h2>Subscribe</h2> 
        <ul> 
         <li>Entries (RSS)</li> 
         <li>Comments (RSS)</li> 
        </ul> 

      </div> <!-- sidebar --> 

     </div> <!-- inner --> 

    </div> <!-- main --> 

    <div id="footer"> 
     <div class="inner"> 

     Something 

     </div> <!-- inner --> 
    </div> <!-- footer --> 

</body> 
</html>

स्रोत

2011-01-12 matt

अपने HTML और divs के लिए सीएसएस कोड क्या है? – BoltClock

अच्छा लेख: http://css-tricks.com/all-about-floats/ – kapa

आप visible के अलावा कुछ करने के लिए युक्त तत्वों संपत्ति सेट कर सकते हैं overflow।

स्रोत

2011-01-12 20:32:24 Jim

यह भी देखें कि http://www.quirksmode.org/css/clearing.html – yorick

यह काम करता है अगर मैं .inner div को सेट करता हूं छिपा हुआ सैलाब! मुझे आश्चर्य है कि यह यानी काम करता है – matt

तो यह clear: both के साथ एक शैली है तुम बस पाद लेख बना सकता है: सिर्फ दो वर्गों की तरह दिखना चाहिए।

स्रोत

2011-01-12 20:29:20 Jacob

सही तत्व अगले तत्व के लिए बाएं और दाएं को साफ़ करना है।

तो पाद लेख पर आप जोड़ सकते हैं:

#footer { 
    clear: both; 
}

यह अगली पंक्ति में नीचे जाने के लिए पाद लेख के लिए मजबूर होता है, और यह उचित 'तरीका है। बाद में अपना डिज़ाइन बदलना आसान होगा क्योंकि आपको परिवर्तन मार्कअप, केवल सीएसएस नहीं जाना होगा।

स्रोत

2011-01-12 20:32:01

मैंने अपनी पोस्ट संपादित की। कृपया एक नज़र डालें। इस मामले में आप इसे कैसे हल करेंगे। एक साधारण स्पष्ट: दोनों नौकरी नहीं करते हैं ... पृष्ठभूमि और सीमा छोटी है – matt

display: inline-block; वास्तव में अच्छा है। बहुत बुरा आईई वास्तव में इसका समर्थन नहीं करता है।

स्रोत

2011-01-12 20:34:57 tdammers

ईमानदार होने के लिए, मैं इसे पाने की कोशिश नहीं करता। आप फूटर में स्पष्ट कर सकते हैं क्योंकि अन्य लोगों ने सुझाव दिया है; लेकिन आपको गारंटी नहीं है कि आपके एचटीएमएल के अन्य हिस्सों को अनुचित रूप से फ़्लोट या अवरुद्ध नहीं किया जाएगा। यदि आप अपने एचटीएमएल के यादृच्छिक भाग में तैरने के कारण गड़बड़ करते समय केवल क्लीयरिंग तत्वों की नीति अपनाते हैं; आप हमेशा ऐसा करने की आदत बना सकते हैं। इसके बजाय, निम्नलिखित एक शैली का एक उदाहरण है जो आमतौर पर गारंटी देता है कि अन्य तत्वों को अनुचित तरीके से जारी नहीं किया जाएगा:

<div> 
    <div style="float:right;"></div> 
    <div style="float:right;"></div> 
    <!--Add a clear div as last sibling of any floated elements--> 
    <div style="clear:both;"></div> 
</div>

इसके अलावा, मैं br के बजाय एक खाली div का प्रयोग करेंगे। हालांकि मुझे बस Thats।

तो अपने उदाहरण से ड्राइंग:

 </div> <!-- post --> 

     <!-- insert empty clear div hear --> 
     <div style="clear:both;"></div> 

     <div id="sidebar">

स्रोत

2011-01-12 20:40:55 Dave

फ़्लोटिंग तत्व <br clear="both"/> एक बेहतर सीएसएस तरीके से?

उत्तर

संबंधित मुद्दे