सीएसएस डिवी फ्लोट बाएं और दाएं अब्रैप

एक छोटी सी पृष्ठभूमि: मैं एक शीर्षलेख पर काम कर रहा हूं जो पूरे वेबपृष्ठ के शीर्ष पर फैलता है। मैं वर्तमान उपयोगकर्ता नाम, एक लॉगआउट बटन इत्यादि को शीर्षलेख में दाईं ओर फ़्लोट करना चाहता हूं, और मैं लोगो और कुछ नेविगेशन बाईं ओर होना चाहता हूं। जब ब्राउज़र विंडो इतनी कम हो जाती है कि बाएं आइटम और दाएं आइटम टकराते हैं, तो मैं उन्हें लपेटना नहीं चाहता हूं। मेरे पास हेडर-कंटेनर div ओवरफ़्लो पर सेट है: ऑटो, इसलिए मैं स्क्रॉलिंग शुरू करना चाहता हूं।सीएसएस डिवी फ्लोट बाएं और दाएं अब्रैप

प्रश्न: यहां तक कि जब मेरे पास एक div float है: बाएं और एक div float: दोनों डिस्प्ले के साथ: इनलाइन-ब्लॉक, और सफेद-स्थान वाले माता-पिता: कोई लपेटें - लपेटें !!! मौके से मुझे पता चला कि मैं इसे एक और div को डिस्प्ले के साथ संलग्न करके काम करने के लिए भी प्राप्त कर सकता हूं: इनलाइन-ब्लॉक। ऐसा क्यों है???

नीचे मेरा कोड और एक कामकाजी jsfiddle है जो कामकाजी सेटअप और सेटअप जो दोनों लपेटता है, दिखाने के लिए नीचे है। मुझे समझ में नहीं आता कि मुझे अतिरिक्त div की आवश्यकता क्यों है।

<h2>With extra inline-block dive. The blue rectangles do not wrap.</h2> 
<div class="wrapper nowrap"> 
    <div class="second-wrapper"> 
     <div class="floating float-left">[logo] | home | [navitem1] | [navitem2]</div> 
     <div class="floating float-right">[username] | logout</div> 
    </div> 
</div> 
<h2>Without extra inline-block dive. The blue rectangles do wrap.</h2> 
<div class="wrapper nowrap"> 
    <div class="floating float-left">[logo] | home | [navitem1] | [navitem2]</div> 
    <div class="floating float-right">[username] | logout</div> 
    <div class="clearfix"></div> 
</div>

सीएसएस:

.wrapper { 
    border:#333; 
    margin-bottom:; 
} 
.second-wrapper { 
    border:; 
    display:inline-block; 
    min-width: 100%; 
} 
.nowrap { 
    white-space: nowrap; 
} 
.clearfix { 
    clear: both; 
} 
.floating { 
    background: lightblue; 
    border:; 
    height:; 
    padding:} 
.float-left { 
    float: left; 
} 
.float-right { 
    float: right 
}

http://jsfiddle.net/klyngbaek/tNHLL/9/

जब मैं खिड़की हटना, मैं दूसरा नीले आयत को एक नई लाइन

एचटीएमएल करने के लिए छोड़ करना चाहते हैं

या शायद जो कुछ मैं चाहता हूं उसे पूरा करने का एक बेहतर तरीका है।

अग्रिम धन्यवाद!

संपादित करें: अद्यतन jsfiddle लिंक

स्रोत

2013-05-19 klyngbaek

मुझे लगता है कि आप पहेली में स्पष्टफिक्स div को भूल गए हैं और मुझे लगता है कि दूसरा-रैपर दोनों फ़्लोटेड-डीवीएस को रखने के कारण क्यों है क्योंकि यह प्रदर्शित संपत्ति इनलाइन-ब्लॉक पर सेट है। –

बाईं, सही, ऊपर और नीचे मार्जिन जोड़ा साथ उदाहरण; एकाधिक divs; मुख्य फ्रेम की ऊंचाई समायोजित करें; बाएं सबसे बाएं फ्लोटिंग div के लिए बाएं मार्जिन सेट करें; और सही सबसे फ्लोटिंग डिव का सही मार्जिन:

परिणाम:

enter image description here

स्टाइलिंग और एचटीएमएल एक फ़ाइल में:

<html> 
<body> 
<style> 

.row { 
    float:left; 
    border: 3px solid blue; 
    width: 96%; 
    margin-left: 2%; 
    margin-right: 2%; 
    height: 115px; 
    overflow: auto; 
    position: static; 
} 

.floatLeftDiv { 
    display: inline-block; 
    border: 3px solid red; 
    width: 200px; 
    height: 100px; 
    margin-top: 3px; 
} 

.right { 
    float: right; 
    border: 3px solid red; 
    width: 200px; 
    height: 100px; 
    margin-top: 3px; 
    margin-right: 1%; 
} 

</style> 

<div class="row"> 
    <div class="floatLeftDiv" style="margin-left: 1%;">Inline Item A:</div> 
    <div class="floatLeftDiv">Inline Item B:</div> 
    <div class="floatLeftDiv">Inline Item C:</div> 
    <div class="right">Inline Item D:</div> 
</div> 


</body> 
</html>

कोड इस चर्चा और एक दूसरे से संशोधित किया।

स्रोत

2014-02-02 05:49:28

display: inline-ब्लॉक प्रभाव चयनकर्ता के बच्चों। यहां अद्यतन संस्करण है जहां बाल तत्वों से इनलाइन-ब्लॉक हटा दिया गया है।

http://jsfiddle.net/ccsuP/

मैं पेज आप लेआउट की कोशिश कर रहे मार्कअप को देखने के लिए होगा। मुझे आश्चर्य है कि स्थिति का उपयोग करने का तरीका हो सकता है।

यहाँ इस जाँच करें और मुझे पता है कि यह मदद करता है: http://jsfiddle.net/taUgM/

* { Box-sizing: Border-box } 

.wrapper { 
    border: 1px dashed #333; 
    margin-bottom: 10px; 
    overflow: auto; 
width: 100%; 
    position:absolute; 
} 
.box{ 
    width:50px; 
    height:50px; 
    border:1px solid yellow; 
    display:block; 
    position: relative; 
} 

.title-etc{ 
    top:0; 
    left:0 
    float:left;   
    background:blue; 
} 
.login-box{ 
    top:0; 
    right:0; 
    float:right; 
     background:red; 
}

स्रोत

2013-05-19 19:37:00 BingeBoy

टिप्पणी के लिए धन्यवाद। शायद मैं अपने प्रश्न के साथ सुपर स्पष्ट नहीं था।मैं नीले आयताकार लपेटने की सामग्री से कोई चिंतित नहीं हूं। जब ब्राउजर विंडो बहुत छोटी हो जाती है तो मुझे 2 नीले आयताकार लपेटने के बारे में चिंतित है। Jsfiddle में आपके अतिरिक्त उदाहरण में दूसरी आयताकार बूंद एक नई रेखा है, जब खिड़की बहुत छोटी हो जाती है। यही वह है जिसे मैं टालने की कोशिश कर रहा हूं। धन्यवाद! – klyngbaek

मेरा दूसरा लिंक देखें जो समाधान दिखाता है: http://jsfiddle.net/taUgM/ – BingeBoy

धन्यवाद। ऐसा लगता है कि आप यहां अर्धविराम गायब हैं 'बाएं: 0 फ्लोट: बाएं;' कक्षा के शीर्षक में आदि। यदि मैं अर्धविराम जोड़ता हूं तो यह फिर से लपेटना शुरू कर देता है। हालांकि, अगर मैं फ्लोट दूर ले जाता हूं: छोड़ दिया यह काम करता है! http://jsfiddle.net/kristianlyngbaek/taUgM/1/ – klyngbaek

सीएसएस डिवी फ्लोट बाएं और दाएं अब्रैप

उत्तर

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