फ्लोट बाएं और दाएं

यह समस्या मुझे कुछ समय से परेशान कर रही है। तो मैंने अपनी समस्या के कुछ दृश्य विवरणफ्लोट बाएं और दाएं

सबसे पहले यहां मेरी HTML संरचना है जिसमें मेरे पास 6 divs हैं .. पहला 3 फ्लोट बाएं और अंतिम 3 फ्लोट दाएं। आखिरी छवि परिणाम दिखाती है जो मुझे चाहिए लेकिन ऐसा प्रतीत नहीं होता है। किसी को वहाँ मुझे यहाँ मदद कर सकते हैं

संपादित // क्षमा heres मेरी HTML और सीएसएस

<style> 
    .left { float:left; } 
    .right { float:right; } 
</style> 
<div id="container"> 
    <div class="left"></div> 
    <div class="left"></div> 
    <div class="left"></div> 
    <div class="right"></div> 
    <div class="right"></div> 
    <div class="right"></div> 
</div>

नोट: मैं एक बाएं, दाएं बाएं सही सही विकल्प छोड़ दिया क्योंकि मैं एक क्वेरी के माध्यम से PHP से मेरी डेटा प्राप्त नहीं कर सकते मेरी डेटाबेस के लिए .. पहली क्वेरी छोड़ दिया जाता है दूसरा क्वेरी चला जाता है सही .... धन्यवाद एक गुच्छा

/संपादित करें

This is a mocukup of my HTML structure

मेरे च loats इस

this is my current result

में परिणाम यह वह जगह है जो मैं चाहता

I want this

स्रोत

2012-06-12 Oldenborg

कृपया अच्छी कोड के लिए अपना कोड ... –

+1, प्रश्न में सभी मार्कअप या सीएसएस के लिए +1! –

एक बाएं, एक दाएं –

आप इसके लिए CSS3 column-count संपत्ति का उपयोग कर सकते हैं। इस तरह लिखें:

.parent{ 
    -moz-column-count: 2; 
    -moz-column-gap: 50%; 
    -webkit-column-count: 2; 
    -webkit-column-gap: 50%; 
    column-count: 2; 
    column-gap: 50%; 
} 
.parent div{ 
    width:50px; 
    height:50px; 
    margin:10px; 
} 
.left{ 
    background:red; 
} 
.right{ 
    background:green; 
}

चेक इस http://jsfiddle.net/UaFFP/6/

स्रोत

2012-06-12 10:48:08 sandeep

बदल सकता हूं जब भी आप CSS3 कॉलम के साथ जवाब देते हैं तो ब्राउज़र समर्थन का उल्लेख करना उपयोगी होता है: http://caniuse.com/multicolumn। उदाहरण के लिए, यह IE9 में काम नहीं करेगा, जिसे कई लोगों को समर्थन करने की आवश्यकता है। – thirtydot

यह वही था जो मैं देख रहा था। लेकिन मुझे IE7 और ऊपर के लिए समर्थन की आवश्यकता है। तो यह पूरी तरह से उपयोगी नहीं है .. लेकिन आपको सही विचार मिला क्योंकि अधिकांश पीपीएल नहीं था। इसलिए आपका धन्यवाद। – Oldenborg

आईई के लिए आप इस जेएस का उपयोग कर सकते हैं http://www.csscripting.com/css-multi-column/ – sandeep

पहले बाईं div जोड़ कर पहला अधिकार div और उन्हें <br style="clear:both"> जोड़ सकते हैं और प्रक्रिया दोहराएं के बाद।

संपादित:

<div style="border:1px solid blue;float:right;height:100px;width:100px;clear:right;"></div> 
<div style="border:1px solid red;float:left;height:100px;width:100px;clear:left;"></div> 
<div style="border:1px solid blue;float:right;height:100px;width:100px;clear:right;"></div> 
<div style="border:1px solid red;float:left;height:100px;width:100px;clear:left;"></div> 
<div style="border:1px solid blue;float:right;height:100px;width:100px;clear:right;"></div> 
<div style="border:1px solid red;float:left;height:100px;width:100px;clear:left;"></div>

स्रोत

2012-06-12 10:12:59

क्षमा करें यह विकल्प नहीं है – Oldenborg

क्यों? आप **
** को बिल्कुल कोई दृश्य प्रतिनिधित्व नहीं कर सकते हैं। –

मैं एक ऐसे प्रोजेक्ट पर काम कर रहा हूं जहां केवल एक ही थिग तक पहुंच है, सीएसएस फाइलें हैं .. हर चीज ऑफलाइन है – Oldenborg

फ्लोट एक बाएं, एक सही है, और पहले स्पष्ट दे:: दोनों संपत्ति

<div class="left clear"></div> 
<div class="right"></div> 
<div class="left clear"></div> 
<div class="right"></div>

सीएसएस

.left {float:left} 
.right {float:right} 
.clear {clear:both}

यहाँ एक अद्यतन जवाब Example

स्रोत

2012-06-12 10:14:59

@jacktheripper: अच्छा, आपने इसे मेरे सामने किया है –

मान लीजिए कि आपके बीच में एक और div है। फिर इस कालानुक्रमिक क्रम का उपयोग करें:

<div class="left"></div> 
<div class="right"></div> 
<div class="content"></div>

या यदि आप नहीं करते हैं, सिर्फ एक और div है कि यह करने के लिए एक शैली clear:both प्रदान जोड़ें।

स्रोत

2012-06-12 10:15:31

कक्षा आईडी नहीं;) –

ओह, हाँ। धन्यवाद @khaled_webdev –

तत्वों के क्रम में हेरफेर करने के लिए या तो एक अच्छा समाधान नहीं है। – crush

का उपयोग करना: n वें वाले बच्चे चयनकर्ता और समाशोधन 2 के बाद divs:

div { 
    width: 50px; 
    height: 50px; 
    background-color: red; 
    float: left; 
} 
div:nth-child(n) { 
    clear: both; 
} 

div:nth-child(2n) { 
    background-color: green; 
    float: right; 
    margin-top: -50px; //match this to the div height 
}

div { 
    width: 50px; 
    height: 50px; 
    background-color: red; 
    float: left; 
} 
div:nth-child(2n) { 
    background-color: green; 
    float: right; 
}

Live example

अन्यथा यह काफी hacky विधि है, जो बिना किसी अतिरिक्त मार्कअप की आवश्यकता का उपयोग Live example

स्रोत

2012-06-12 10:19:47 jacktheripper

मैंने इसे थोड़ा सा मॉडेड करने का प्रयास किया है लेकिन यह सही नहीं लगता है। यहां वह जगह है जहां मैं आईएमटी को स्पर्श नहीं कर सकता .. यह तय है .. मैं केवल सीएसएस के साथ काम कर सकता हूं [लाइव उदाहरण] (http://jsfiddle.net/nSDcb/) – Oldenborg

<style type="text/css"> 

.parent {width:50px; border:1px solid red;} 

.left {float:left; } 

.right{float:right;} 

.child{height:50px;width:50px;border:solid 1px green;margin:0 0 10px 0;} 

</style> 

<body> 

<div class="left parent"> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
</div> 

<div class="right parent"> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
</div> 

</body> 

</html>

दिमाग में केंद्रीय डीआईवी नहीं होना चाहिए, अगर यह मामला माता-पिता डीआईवी छोड़ देता है, तो 20% 60% 20% की चौड़ाई कहें।

स्रोत

2012-06-12 10:30:40 bdede

मैंने यह किया है लेकिन मैंने निर्देश दिया है एचटीएमएल को छूने के लिए नहीं, मैं केवल सीएसएस – Oldenborg

HTML:

<div class="leftcolums"> 
    <div class="left">1</div> 
    <div class="left">2</div> 
    <div class="left">3</div>  
</div> 
<div class="rightcolums"> 
    <div class="right">4</div> 
    <div class="right">5</div> 
    <div class="right">6</div> 
</div> 
<div class="clear"></div>

शैलियों:

.leftcolums{float:left;} 
.rightcolums{float:right;} 
.clear{clear:both;}

स्रोत

2014-02-15 21:43:06

column-count पहले से ही व्यापक रूप से समर्थित है - http://caniuse.com/#feat=multicolumn तो अगर पुराने ब्राउज़र नहीं करता ' मैं आपको परेशान करने पर विचार नहीं करता टी।

स्रोत

2016-01-30 18:18:40 Vlad

और आप इसके साथ क्या करते हैं (ओपी की समस्या को हल करने के लिए)? – dakab

मैं जानना चाहता हूं, 3 साल बाद: डी – Oldenborg

फ्लोट बाएं और दाएं

उत्तर

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