मैं केवल CSS का उपयोग करके अपने divs को कैसे पुनः व्यवस्थित कर सकता हूं?

266

एक टेम्पलेट को देखते हुए जहां HTML को अन्य आवश्यकताओं के कारण संशोधित नहीं किया जा सकता है, HTML में उस क्रम में नहीं होने पर divएक दूसरे के ऊपर प्रदर्शन (पुनर्व्यवस्थित) करना कैसे संभव है div? दोनों divमें डेटा होता है जो ऊंचाई और चौड़ाई में भिन्न होता है।

<div id="wrapper">
    <div id="firstDiv">
        Content to be below in this situation
    </div>
    <div id="secondDiv">
        Content to be above in this situation
    </div>
</div>
Other elements

उम्मीद है कि यह स्पष्ट है कि वांछित परिणाम है:

Content to be above in this situation
Content to be below in this situation
Other elements

जब आयामों को तय किया जाता है, तो जहां उन्हें आवश्यकता होती है, वहां स्थित करना आसान होता है, लेकिन सामग्री के परिवर्तनशील होने पर मुझे कुछ विचारों की आवश्यकता होती है। इस परिदृश्य के लिए, कृपया केवल दोनों पर चौड़ाई को 100% मानें।

मैं विशेष रूप से CSS-only समाधान की तलाश कर रहा हूं (और यह संभवत: अन्य समाधानों के साथ मिलना होगा, अगर वह पैन नहीं करता है)।

इसके पीछे अन्य तत्व हैं। एक अच्छे सुझाव का उल्लेख किया गया था जिसे मैंने दिखाते हुए सीमित परिदृश्य दिया था-यह देखते हुए कि यह सबसे अच्छा जवाब हो सकता है, लेकिन मैं यह भी सुनिश्चित करना चाहता हूं कि निम्नलिखित तत्व प्रभावित न हों।

html  css 
— devmode
स्रोत

जवाबों:

279

यह समाधान केवल CSS का उपयोग करता है और चर सामग्री के साथ काम करता है

#wrapper   { display: table; }
#firstDiv  { display: table-footer-group; }
#secondDiv { display: table-header-group; }
— जोर्डी
स्रोत
3
अच्छा! IE8 या उससे कम के लिए काम नहीं करता है, लेकिन आप उन ब्राउज़रों के लिए एक सशर्त स्क्रिप्ट का उपयोग कर सकते हैं ...
— स्टुअर्ट वेकफील्ड
1
यह सच है कि IE7 के लिए काम नहीं कर रहा है, लेकिन मुझे IE8 के साथ कोई समस्या नहीं है
— जॉर्डन
3
हाँ, यह मोबाइल सामग्री के लिए बहुत अच्छा है, और IE चिंता खिड़की से बाहर है! थिंक मेनू जो पहले परिभाषित किए गए हैं और सामान्य लेआउट के लिए बाईं ओर दिखाई देते हैं, लेकिन आप चाहते हैं कि वे संकीर्ण मोबाइल डिस्प्ले पर सबसे नीचे दिखाई दें। यह चाल बहुत अच्छी तरह से करता है।
— मॉर्फल्स
13
यह ध्यान दिया जाना चाहिए कि यह फ्लोट्स के साथ काम नहीं करता है। आपको फ्लोट सेट करना होगा: कोई नहीं; यदि आपके पास पहले से ही एक फ्लोट सेट था।
— थॉमस
5
नोट: img { max-width: 100% }पुनर्निर्मित तत्वों के अंदर काम नहीं करेगा।
— जोनास Jonppelgran
239

CSS-only समाधान ( IE10 + के लिए काम करता है ) - Flexbox की orderसंपत्ति का उपयोग करें :

डेमो: http://jsfiddle.net/hqya7q6o/596/

#flex { display: flex; flex-direction: column; }
#a { order: 2; }
#b { order: 1; }
#c { order: 3; }
<div id="flex">
   <div id="a">A</div>
   <div id="b">B</div>
   <div id="c">C</div>
</div>
स्निपेट का विस्तार करें

अधिक जानकारी: https://developer.mozilla.org/en-US/docs/Web/CSS/order

— जस्टिन
स्रोत
1
आदेश देना यहां काम करता है। लेकिन बच्चों को 100% चौड़ाई नहीं मिल रही है। इसके बजाय, वे एक ही पंक्ति में अपने रिक्त स्थान साझा कर रहे हैं। इस पद्धति से प्रत्येक बच्चे के लिए 100% चौड़ाई का उपयोग कैसे किया जा सकता है?
— अंकिशन001
8
#flex { display: flex; flex-direction: column; }100% चौड़ाई वाली पंक्तियों को प्रदर्शित करेगा। jsfiddle.net/2fcj8s9e
— जस्टिन
यह transformएक व्यापक ब्राउज़र सपोर्ट के साथ उपयोग किया जा सकता है
— चालाकी
IPhone 6s और उससे नीचे का समर्थन नहीं
— AntonAL
4
यह समाधान आपको किसी भी संख्या में div के लिए कोई वांछित आदेश चुनने की अनुमति देता है। यह स्वीकृत समाधान IMO होना चाहिए।
— मोराओफ्ट
83

जैसा कि दूसरों ने कहा है, यह ऐसा कुछ नहीं है जिसे आप सीएसएस में करना चाहते हैं। आप इसे पूर्ण स्थिति और अजीब मार्जिन के साथ जोड़ सकते हैं, लेकिन यह सिर्फ एक मजबूत समाधान नहीं है। आपके मामले में सबसे अच्छा विकल्प जावास्क्रिप्ट को चालू करना होगा। JQuery में, यह एक बहुत ही सरल कार्य है:

$('#secondDiv').insertBefore('#firstDiv');

या अधिक उदारतापूर्वक:

$('.swapMe').each(function(i, el) {
    $(el).insertBefore($(el).prev());
});
— nickf
स्रोत
2
कभी-कभी यह उन सबसे अधिक शक्तिशाली के लिए उपज के लिए सबसे अच्छा है। इस मामले में यह अधिक सुरुचिपूर्ण लगता है और आप वास्तविक नियंत्रण में हैं। इस कारण से मुझे लगता है कि यह बेहतर और बेहतर है।
— उतरा
35

यह Flexbox का उपयोग करके किया जा सकता है।

एक कंटेनर बनाएं जो दोनों डिस्प्ले को लागू करता है: फ्लेक्स और फ्लेक्स-फ्लो: कॉलम-रिवर्स ।

/* -- Where the Magic Happens -- */

.container {
  
  /* Setup Flexbox */
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  /* Reverse Column Order */
  -webkit-flex-flow: column-reverse;
  flex-flow: column-reverse;

}


/* -- Styling Only -- */

.container > div {
  background: red;
  color: white;
  padding: 10px;
}

.container > div:last-of-type {
  background: blue;
}
<div class="container">
  
  <div class="first">

     first

  </div>
  
  <div class="second">

    second

  </div>
  
</div>
स्निपेट का विस्तार करें

सूत्रों का कहना है:

— BlakePetersen
स्रोत
25

पूर्व-फ्लेक्सबॉक्स उपयोगकर्ता एजेंटों ( ज्यादातर पुराने IE ) का समर्थन करते हुए अकेले सीएसएस के माध्यम से जो आप चाहते हैं उसे प्राप्त करने का कोई तरीका नहीं है - जब तक :

  1. आप प्रत्येक तत्व की सटीक प्रदान की गई ऊँचाई जानते हैं (यदि ऐसा है, तो आप सामग्री को पूर्ण रूप से स्थिति में ला सकते हैं)। यदि आप गतिशील रूप से उत्पन्न सामग्री के साथ काम कर रहे हैं, तो आप भाग्य से बाहर हैं।
  2. आप जानते हैं कि इन तत्वों की सही संख्या क्या होगी। फिर, यदि आपको गतिशील रूप से उत्पन्न सामग्री के कई भाग के लिए ऐसा करने की आवश्यकता है, तो आप भाग्य से बाहर हैं, खासकर यदि तीन या अधिक से अधिक हैं।

यदि उपरोक्त सत्य हैं, तो आप वे कर सकते हैं जो आप तत्वों को पूरी तरह से करना चाहते हैं -

#wrapper { position: relative; }
#firstDiv { position: absolute; height: 100px; top: 110px; }
#secondDiv { position: absolute; height: 100px; top: 0; }

फिर, यदि आप नहीं जानते कि ऊंचाई कम से कम #firstDiv के लिए चाहते हैं, तो ऐसा कोई तरीका नहीं है जिससे आप अकेले सीएसएस के माध्यम से जो चाहें कर सकते हैं। यदि इस सामग्री में से कोई भी गतिशील है, तो आपको जावास्क्रिप्ट का उपयोग करना होगा।

— मैट हॉवेल
स्रोत
ठीक है, मैंने इसे भी डाउनवोट किया, पहला, लेकिन रिवर्ट किया। परिशोधन का एक बिट अभी भी स्थितियों के कारण है, हालांकि: आपको पुन: क्रमबद्ध करने के लिए तत्वों की सही संख्या जानने की आवश्यकता नहीं है , जब तक कि संख्या> 3 ( बाउंटी-विजेता उत्तर देखें )। यह विशेष रूप से ओपी के लिए प्रासंगिक है विशेष रूप से केवल 2 आइटम स्वैप करना चाहता था।
— एस.जे.
16

यहाँ एक समाधान है:

<style>
#firstDiv {
    position:absolute; top:100%;
}
#wrapper {
    position:relative; 
}

लेकिन मुझे संदेह है कि आपके पास कुछ ऐसी सामग्री है जो रैपर div ...

— बूटी-oxa
स्रोत
हां ... स्थिति से बहुत अधिक चिंतित नहीं होने की कोशिश कर रहे हैं, लेकिन निम्नलिखित अन्य तत्व हैं। अच्छा सुझाव, हालांकि सीमित HTML दिया गया - किसी और के लिए काम कर सकता है।
— डेमोड
7

CSS3 फ्लेक्सबॉक्स लेआउट मॉड्यूल के साथ, आप divs ऑर्डर कर सकते हैं।

#wrapper {
  display: flex;
  flex-direction: column;
}
#firstDiv {
  order: 2;
}

<div id="wrapper">
  <div id="firstDiv">
    Content1
  </div>
  <div id="secondDiv">
    Content2
  </div>
</div>
— अरुण कुमार एम
स्रोत
5

यदि आप जानते हैं, या ऊपरी-ऊपरी तत्व के लिए आकार को लागू कर सकते हैं, तो आप उपयोग कर सकते हैं 

position : absolute;

अपने सीएसएस में और divs अपनी स्थिति दे।

अन्यथा जावास्क्रिप्ट को जाने का एकमात्र तरीका लगता है:

fd = document.getElementById( 'firstDiv' );
sd = document.getElementById( 'secondDiv' );
fd.parentNode.removeChild( fd );
sd.parentNode.insertAfter( fd, sd );

या ऐसा ही कुछ।

संपादित करें: मैंने अभी-अभी यह पाया है जो उपयोगी हो सकता है: w3 दस्तावेज़ css3 मूव-टू

— क्रिस
स्रोत
5

नकारात्मक शीर्ष मार्जिन इस प्रभाव को प्राप्त कर सकते हैं, लेकिन उन्हें प्रत्येक पृष्ठ के लिए अनुकूलित करने की आवश्यकता होगी। उदाहरण के लिए, यह मार्कअप ...

<div class="product">
<h2>Greatest Product Ever</h2>
<p class="desc">This paragraph appears in the source code directly after the heading and will appear in the search results.</p>
<p class="sidenote">Note: This information appears in HTML after the product description appearing below.</p>
</div>

... और यह सीएसएस ...

.product { width: 400px; }
.desc { margin-top: 5em; }
.sidenote { margin-top: -7em; }

... आपको पहले के ऊपर दूसरा पैराग्राफ खींचने की अनुमति देगा।

बेशक, आपको अलग-अलग विवरण लंबाई के लिए अपने सीएसएस को मैन्युअल रूप से ट्विस्ट करना होगा ताकि इंट्रो पैराग्राफ उचित मात्रा में कूद जाए, लेकिन यदि आपके पास अन्य भागों पर सीमित नियंत्रण है और मार्कअप और सीएसएस पर पूर्ण नियंत्रण है तो यह एक विकल्प हो सकता है। ।

— कार्ल कैमरा
स्रोत
4

अच्छी तरह से, पूर्ण स्थिति और थोड़े से थोड़े अंतर के साथ, मैं करीब पहुँच सकता हूँ, लेकिन यह सही या सुंदर नहीं है:

#wrapper { position: relative; margin-top: 4em; }
#firstDiv { position: absolute; top: 0; width: 100%; }
#secondDiv { position: absolute; bottom: 0; width: 100%; }

"मार्जिन-टॉप: 4em" विशेष रूप से बुरा बिट है: इस मार्जिन को फ़र्स्टडिव में सामग्री की मात्रा के अनुसार समायोजित करने की आवश्यकता है। आपकी सटीक आवश्यकताओं के आधार पर, यह संभव हो सकता है, लेकिन मैं वैसे भी उम्मीद कर रहा हूं कि कोई ठोस समाधान के लिए इस पर निर्माण करने में सक्षम हो सकता है।

जावास्क्रिप्ट के बारे में एरिक की टिप्पणी का शायद पीछा किया जाना चाहिए।

— बॉबी जैक
स्रोत
3

यह केवल CSS के साथ किया जा सकता है!

कृपया इस तरह के प्रश्न के लिए मेरे उत्तर की जाँच करें:

https://stackoverflow.com/a/25462829/1077230

मैं अपने उत्तर को दोबारा पोस्ट नहीं करना चाहता, लेकिन इसकी कमी यह है कि अभिभावक को एक फ्लेक्सबॉक्स तत्व बनना चाहिए। उदाहरण के लिए:

(यहां केवल वेबकिट विक्रेता उपसर्ग का उपयोग कर रहा है।)

#main {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}

फिर, उनके साथ अपने ऑर्डर को इंगित करके चारों ओर स्वैप करें:

#main > div#one{
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;
    overflow:visible;
}

#main > div#two{
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;
}
— jansmolders86
स्रोत
3

अपने CSS में, पहले div को बाएँ या दाएँ घुमाएँ। दूसरी डिव को पहले की तरह बाएं या दाएं फ्लोट करें। लागू करें clear: leftया rightदूसरे div के लिए उपरोक्त दो divs के समान है।

उदाहरण के लिए:

#firstDiv {
    float: left;
}

#secondDiv {
    float: left;
    clear: left;
}
— रेजा अमाया
स्रोत
<div class = "कंटेनर"> <div id = "secondDiv"> <p> ... </ p> </ div> <div id = "firstDiv"> <p> ... </ p> </ div> </ div>
— Vestel
मेरे मामले पर फ्लोट: सही; स्पष्ट: छोड़ दिया; सही काम कर रहे
— user956584
स्पष्ट उपयोग करना शानदार तरीका है, लेकिन ध्यान दें कि आपको अपने तत्व को सही दिशा में तैरना चाहिए और साथ ही आपको अन्य तत्वों को सही करने के लिए तैरना चाहिए। वेस्टेल आपको कुछ शैलियों का उपयोग करना चाहिए: <style> #secondDiv, #firstDiv {float: left; } #firstDiv {स्पष्ट: बाएं; } </ शैली> <div class = "कंटेनर"> कंटेनर <div id = "secondDiv"> <p> secondDiv </ p> </ div> <div id = "firstDiv"> <p> firstDiv </>> </ div> </ div>
— रेजा अमाया जूल
3

यदि आप बस सीएसएस का उपयोग करते हैं, तो आप फ्लेक्स का उपयोग कर सकते हैं।

.price {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-direction: row-reverse; //revert horizontally
    //flex-direction: column-reverse; revert vertically
}
<div class="price">
      <div>first block</div>
      <div>second block</div>
</div>
स्निपेट का विस्तार करें

— अल Bulat
स्रोत
2

मैं केवल मोबाइल संस्करण के लिए डिव के आदेशों को बदलने के लिए एक रास्ता तलाश रहा था ताकि मैं इसे अच्छी तरह से स्टाइल कर सकूं। उत्तर देने के लिए धन्यवाद, मुझे यह कोड बनाने के लिए मिला, जो मैंने जो चाहा, उसके लिए अच्छा काम किया, इसलिए मैं इसे आप लोगों के साथ साझा करता हूं:

//  changing the order of the sidebar so it goes after the content for mobile versions
jQuery(window).resize(function(){
    if ( jQuery(window).width() < 480 )
    {
        jQuery('#main-content').insertBefore('#sidebar');
    }
    if ( jQuery(window).width() > 480 )
    {
        jQuery('#sidebar').insertBefore('#main-content');
    }
    jQuery(window).height(); // New height
    jQuery(window).width(); // New width
});
— जोस पैतमाला
स्रोत
1

एक बड़े ब्राउज़र समर्थन के साथ एक समाधान फिर फ्लेक्सबॉक्स (IE )9 में काम करता है):

#wrapper {
  -webkit-transform: scaleY(-1);
  -ms-transform: scaleY(-1);
  transform: scaleY(-1);
}
#wrapper > * {
  -webkit-transform: scaleY(-1);
  -ms-transform: scaleY(-1);
  transform: scaleY(-1);
}
<div id="wrapper">
    <div id="firstDiv">
        Content to be below in this situation
    </div>
    <div id="secondDiv">
        Content to be above in this situation
    </div>
</div>
Other elements
स्निपेट का विस्तार करें

display: table;समाधान के विपरीत यह समाधान तब काम करता है जब .wrapperबच्चों की कोई राशि होती है।

— चालाकी
स्रोत
क्या होगा अगर डिव में एक छवि है>?
— रामजी सीतारमण
0

बस निर्दिष्ट करके मूल div के लिए फ्लेक्स का उपयोग करें display: flexऔर flex-direction : column। फिर यह निर्धारित करने के लिए आदेश का उपयोग करें कि कौन सा बच्चा div पहले आता है

— MUSTAPHA ABDULRASHEED
स्रोत
2
आपको क्यों लगता है कि 7y पुराने प्रश्न का उत्तर पहले से पोस्ट किए गए लोगों से बेहतर है? यदि आप एसओ पर भाग लेना चाहते हैं, तो कृपया बिना (अच्छे) उत्तर के प्रश्नों को ढूंढें और उन्हें उन अंदाज में अंजाम देने की कोशिश करें, जो सभी आगंतुकों के लिए मददगार हों।
— मार्कि 555
-1

HTML बैकएंड को रिस्ट्रक्चर करने के लिए CSS का वास्तव में उपयोग नहीं किया जाना चाहिए। हालांकि, यह संभव है यदि आप इसमें शामिल दोनों तत्वों की ऊंचाई जानते हैं और हैकिंग महसूस कर रहे हैं। इसके अलावा, डिव के बीच जाने पर टेक्स्ट सिलेक्शन गड़बड़ हो जाएगा, लेकिन ऐसा इसलिए है क्योंकि HTML और CSS ऑर्डर विपरीत हैं।

#firstDiv { position: relative; top: YYYpx; height: XXXpx; }
#secondDiv { position: relative; top: -XXXpx; height: YYYpx; }

जहां XXX और YYY क्रमशः पहले और दूसरेDiv की ऊंचाइयां हैं। यह शीर्ष उत्तर के विपरीत अनुगामी तत्वों के साथ काम करेगा।

— user65952
स्रोत
फिर , स्क्रीन रीडर के लिए नेविगेशन से पहले सामग्री डालते हुए, "HTML के पुनर्गठन के लिए" का क्या उपयोग किया जाना चाहिए ?
— डेमियन येरिक
-1

मेरे पास एक बेहतर कोड है, जो मेरे द्वारा बनाया गया है, यह इतना बड़ा है, बस दोनों चीजों को दिखाने के लिए ... एक 4x4 तालिका बनाएं और केवल एक सेल से अधिक ऊर्ध्वाधर संरेखित करें।

यह किसी भी IE हैक का उपयोग नहीं करता है, कोई ऊर्ध्वाधर-संरेखित नहीं करता है: मध्य; बिल्कुल भी...

यह ऊर्ध्वाधर केंद्रित प्रदर्शन-तालिका, प्रदर्शन के लिए उपयोग नहीं करता है: तालिका-रोम; प्रदर्शित: तालिका सेल;

यह एक कंटेनर की चाल का उपयोग करता है जिसमें दो divs होते हैं, एक छिपा हुआ होता है (स्थिति सही नहीं होती है लेकिन माता-पिता के पास सही चर आकार होता है), एक छिपे हुए के बाद दिखाई देता है, लेकिन शीर्ष: -50% के साथ; इसलिए यह सही स्थिति के लिए प्रस्तावक है।

डिव क्लासेस देखें जो ट्रिक बनाते हैं: BloqueTipoContenedor BloqueTipoContenedor_VerticalmenteCentrado BloqueTipoContenido_VerticalmenteCentrado_Ococo BloqueTipoContenido_VerticalmenteCentrado_Vouble

कक्षाओं के नामों पर स्पेनिश का उपयोग करने के लिए कृपया क्षमा करें (यह इसलिए है क्योंकि मैं स्पेनिश बोलता हूं और यह इतना मुश्किल है कि अगर मैं अंग्रेजी का उपयोग करता हूं तो मैं खो जाता हूं)।

पूर्ण कोड:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en" />
<meta name="language" content="en" />
<title>Vertical Centering in CSS2 - Example (IE, FF & Chrome tested) - This is so tricky!!!</title>
<style type="text/css">
 html,body{
  margin:0px;
  padding:0px;
  width:100%;
  height:100%;
 }
 div.BloqueTipoTabla{
  display:table;margin:0px;border:0px;padding:0px;width:100%;height:100%;
 }
 div.BloqueTipoFila_AltoAjustadoAlContenido{
  display:table-row;margin:0px;border:0px;padding:0px;width:100%;height:auto;
 }
 div.BloqueTipoFila_AltoRestante{
  display:table-row;margin:0px;border:0px;padding:0px;width:100%;height:100%;
 }
 div.BloqueTipoCelda_AjustadoAlContenido{
  display:table-cell;margin:0px;border:0px;padding:0px;width:auto;height:auto;
 }
 div.BloqueTipoCelda_RestanteAncho{
  display:table-cell;margin:0px;border:0px;padding:0px;width:100%;height:auto;
 }
 div.BloqueTipoCelda_RestanteAlto{
  display:table-cell;margin:0px;border:0px;padding:0px;width:auto;height:100%;
 }
 div.BloqueTipoCelda_RestanteAnchoAlto{
  display:table-cell;margin:0px;border:0px;padding:0px;width:100%;height:100%;
 }
 div.BloqueTipoContenedor{
  display:block;margin:0px;border:0px;padding:0px;width:100%;height:100%;position:relative;
 }
 div.BloqueTipoContenedor_VerticalmenteCentrado{
  display:block;margin:0px;border:0px;padding:0px;width:100%;height:auto;position:relative;top:50%;
 }
 div.BloqueTipoContenido_VerticalmenteCentrado_Oculto{
  display:block;margin:0px;border:0px;padding:0px;width:100%;height:auto;visibility:hidden;position:relative;top:50%;
 }
 div.BloqueTipoContenido_VerticalmenteCentrado_Visible{
  display:block;margin:0px;border:0px;padding:0px;width:100%;height:auto;visibility:visible;position:absolute;top:-50%;
 }
</style>
</head>
<body>
<h1>Vertical Centering in CSS2 - Example<br />(IE, FF & Chrome tested)<br />This is so tricky!!!</h1>
<div class="BloqueTipoTabla" style="margin:0px 0px 0px 25px;width:75%;height:66%;border:1px solid blue;">
 <div class="BloqueTipoFila_AltoAjustadoAlContenido">
  <div class="BloqueTipoCelda_AjustadoAlContenido">
   [1,1]
  </div>
  <div class="BloqueTipoCelda_AjustadoAlContenido">
   [1,2]
  </div>
  <div class="BloqueTipoCelda_RestanteAncho">
   [1,3]
  </div>
  <div class="BloqueTipoCelda_AjustadoAlContenido">
   [1,4]
  </div>
 </div>
 <div class="BloqueTipoFila_AltoAjustadoAlContenido">
  <div class="BloqueTipoCelda_AjustadoAlContenido">
   [2,1]
  </div>
  <div class="BloqueTipoCelda_AjustadoAlContenido">
   [2,2]
  </div>
  <div class="BloqueTipoCelda_RestanteAncho">
   [2,3]
  </div>
  <div class="BloqueTipoCelda_AjustadoAlContenido">
   [2,4]
  </div>
</div>
 <div class="BloqueTipoFila_AltoRestante">
  <div class="BloqueTipoCelda_RestanteAlto">
   <div class="BloqueTipoContenedor" style="border:1px solid lime;">
    <div class="BloqueTipoContenedor_VerticalmenteCentrado" style="border:1px dotted red;">
     <div class="BloqueTipoContenido_VerticalmenteCentrado_Oculto">
     The cell [3,1]
     <br />
     *&nbsp;*&nbsp;*&nbsp;*
     <br />
     *&nbsp;*&nbsp;*&nbsp;*
     <br />
     *&nbsp;*&nbsp;*&nbsp;*
     <br />
     Now&nbsp;is&nbsp;the&nbsp;highest&nbsp;one
     </div>
     <div class="BloqueTipoContenido_VerticalmenteCentrado_Visible" style="border:1px dotted blue;">
     The cell [3,1]
     <br />
     *&nbsp;*&nbsp;*&nbsp;*
     <br />
     *&nbsp;*&nbsp;*&nbsp;*
     <br />
     *&nbsp;*&nbsp;*&nbsp;*
     <br />
     Now&nbsp;is&nbsp;the&nbsp;highest&nbsp;one
     </div>
    </div>
   </div>
  </div>
  <div class="BloqueTipoCelda_RestanteAlto">
   <div class="BloqueTipoContenedor" style="border:1px solid lime;">
    <div class="BloqueTipoContenedor_VerticalmenteCentrado" style="border:1px dotted red;">
     <div class="BloqueTipoContenido_VerticalmenteCentrado_Oculto">
      This&nbsp;is<br />cell&nbsp;[3,2]
     </div>
     <div class="BloqueTipoContenido_VerticalmenteCentrado_Visible" style="border:1px dotted blue;">
      This&nbsp;is<br />cell&nbsp;[3,2]
     </div>
    </div>
   </div>
  </div>
  <div class="BloqueTipoCelda_RestanteAnchoAlto">
   <div class="BloqueTipoContenedor" style="border:1px solid lime;">
    <div class="BloqueTipoContenedor_VerticalmenteCentrado" style="border:1px dotted red;">
     <div class="BloqueTipoContenido_VerticalmenteCentrado_Oculto">
      This is cell [3,3]
      <br/>
      It is duplicated on source to make the trick to know its variable height
      <br />
      First copy is hidden and second copy is visible
      <br/>
      Other cells of this row are not correctly aligned only on IE!!!
     </div>
     <div class="BloqueTipoContenido_VerticalmenteCentrado_Visible" style="border:1px dotted blue;">
      This is cell [3,3]
      <br/>
      It is duplicated on source to make the trick to know its variable height
      <br />
      First copy is hidden and second copy is visible
      <br/>
      Other cells of this row are not correctly aligned only on IE!!!
     </div>
    </div>
   </div>
  </div>
  <div class="BloqueTipoCelda_RestanteAlto">
   <div class="BloqueTipoContenedor" style="border:1px solid lime;">
    <div class="BloqueTipoContenedor_VerticalmenteCentrado" style="border:1px dotted red;">
     <div class="BloqueTipoContenido_VerticalmenteCentrado_Oculto">
      This&nbsp;other is<br />the cell&nbsp;[3,4]
     </div>
     <div class="BloqueTipoContenido_VerticalmenteCentrado_Visible" style="border:1px dotted blue;">
      This&nbsp;other is<br />the cell&nbsp;[3,4]
     </div>
    </div>
   </div>
  </div>
 </div>
 <div class="BloqueTipoFila_AltoAjustadoAlContenido">
  <div class="BloqueTipoCelda_AjustadoAlContenido">
   [4,1]
  </div>
  <div class="BloqueTipoCelda_AjustadoAlContenido">
   [4,2]
  </div>
  <div class="BloqueTipoCelda_RestanteAncho">
   [4,3]
  </div>
  <div class="BloqueTipoCelda_AjustadoAlContenido">
   [4,4]
  </div>
 </div>
</div>
</body>
</html>
— z666zz666z
स्रोत
-1

पार्टी में थोड़ा देर से, लेकिन आप यह भी कर सकते हैं:

<div style="height: 500px; width: 500px;">

<div class="bottom" style="height: 250px; width: 500px; background: red; margin-top: 250px;"></div>

<div class="top" style="height: 250px; width: 500px; background: blue; margin-top: -500px;"></div>

— lsrom
स्रोत
-2

या तत्व के लिए एक पूर्ण स्थिति सेट करें और उन्हें पृष्ठ के किनारे से ऑब्जेक्ट के किनारे के बजाय घोषित करके मार्जिन को बंद करें। अन्य स्क्रीन आकार ect के लिए इसके अधिक उपयुक्त के रूप में% का उपयोग करें। इस तरह से मैंने इस मुद्दे पर काबू पा लिया ... धन्यवाद, उम्मीद है कि आपकी क्या तलाश है ...

— टॉम डेनली
स्रोत
-3

सीएसएस ओनली सॉल्यूशन के लिए 1. रैपर की या तो ऊंचाई तय की जानी चाहिए या 2. दूसरी डीव की ऊंचाई तय की जानी चाहिए

— KoolKabin
स्रोत
यह वास्तव में पूछे जा रहे सवाल का जवाब देने के लिए कुछ भी नहीं करता है। यह एक संभव समाधान पर संकेत टिप्पणी से ज्यादा कुछ नहीं है।
— साइमन
-3 
.move-wrap {
    display: table;
    table-layout: fixed; // prevent some responsive bugs
    width: 100%; // set a width if u like
    /* TODO: js-fallback IE7 if u like ms */
}

.move-down {
    display: table-footer-group;
}

.move-up {
    display: table-header-group;
}
— K.Kutschera
स्रोत
2
यह समाधान 3 साल पहले ही आपका पोस्ट किया गया था: stackoverflow.com/a/12069537/1652962
— cimmanon
-4

यह सीएसएस के साथ आसान है, बस उपयोग display:blockऔर z-indexसंपत्ति

यहाँ एक उदाहरण है:

HTML:

<body>
    <div class="wrapper">

        <div class="header">
            header
        </div>

        <div class="content">
            content
        </div>
    </div>
</body>

सीएसएस:

.wrapper
{
    [...]
}

.header
{
    [...]
    z-index:9001;
    display:block;
    [...]
}

.content
{
    [...]
    z-index:9000;
    [...]
}

संपादित करें: चीजों को ठीक से देखने background-colorके div-sलिए कुछ सेट करना अच्छा है।

— Pmillan
स्रोत
-4

मेरे पास ऐसा करने का एक सरल तरीका है।

<!--  HTML  -->

<div class="wrapper">

    <div class="sm-hide">This content hides when at your layouts chosen breaking point.</div>

    <div>Content that stays in place</div>

    <div class="sm-show">This content is set to show at your layouts chosen breaking point.</div>

</div>

<!--  CSS  -->

    .sm-hide {display:block;}
    .sm-show {display:none;}

@media (max-width:598px) {
    .sm-hide {display:none;}
    .sm-show {display:block;}
}
— जियान मिलर
स्रोत
आपका समाधान अच्छी तरह से समस्या को हल कर सकता है - लेकिन क्या आप यह बता सकते हैं कि यह क्यों / कैसे करता है। S / O पर ब्रांड के नए शौक के ढेर हैं और वे आपकी विशेषज्ञता से एक चीज सीख सकते हैं। आपके लिए एक स्पष्ट समाधान हो सकता है कि उनके लिए ऐसा न हो।
— टैरिन पूर्व
अपने दम पर कोड ब्लॉक आमतौर पर उपयोगी उत्तर नहीं होते हैं, और डाउनवोट को आकर्षित करने की अधिक संभावना होती है। कृपया बताएं कि जो समाधान आप दिखा रहे हैं, और वह कोड क्यों / कैसे प्रश्न का उत्तर देता है।
— j_s_stack
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.