सीएसएस का उपयोग कर एक उत्तरदायी क्षैतिज लेआउट कैसे बनाएँ?

Question

मैं एक रचनात्मक डिजाइन स्टूडियो के लिए काम करता हूं जो अद्वितीय वेबसाइट लेआउट बनाने के लिए प्रतिमान और सम्मेलन तोड़ना पसंद करता है और हाल ही में हमने क्षैतिज वेबसाइट लेआउट विकसित करना शुरू कर दिया है। जबकि क्षैतिज वेबसाइट लेआउट "ठंडा" दिखते हैं, फिर भी मैंने काम नहीं किया है कि उन्हें तरल पदार्थ और उत्तरदायी बनाने के तरीके के बारे में बताएं कि आप एक ऊर्ध्वाधर ग्रिड आधारित वेबसाइट के बाहर क्या कर सकते हैं।

आम तौर पर एक कंटेनर के साथ एक लंबवत वेबसाइट के लिए आपके कंटेनर तत्व पर प्रतिशत आधारित चौड़ाई होगी, फिर अधिकतम-चौड़ाई निर्धारित करें। उत्तरदायी लेआउट के साथ आपकी सामग्री असीमित रूप से पृष्ठ से स्क्रॉल हो जाती है, यह चौड़ाई में भिन्न हो सकती है, खासकर यदि सामग्री अद्वितीय है और इसलिए फॉर्मूला लक्ष्य/संदर्भ * 100 वास्तव में काम नहीं करता है (या यह करता है?)।

क्या यह संभवतः एक ग्रिड आधारित उत्तरदायी वेबसाइट की तरह काम करने के लिए तत्वों पर उत्तरदायी ऊंचाइयों, पैडिंग और मार्जिन रखने का एक तरीका है। मुझे जावास्क्रिप्ट का उपयोग करने में कोई फर्क नहीं पड़ता लेकिन एक सीएसएस फिक्स आदर्श होगा।

आपके संदर्भ के लिए लेआउट के प्रकार का एक उदाहरण मैं बनाने के लिए कोशिश कर रहा हूँ:

Answer 1

आप पृष्ठ कंटेनर div के बच्चे तत्वों की गणना .outerWidth और उन सब को एक साथ जोड़ने और जोड़कर jQuery के साथ ऐसा कर सकते हैं कि पेज या div के .css('width')

HTML संरचना करने के लिए:

<div id="main"> 
    <div><img src="#" /></div> 
    <div><img src="#" /></div> 
    <div><img src="#" /></div> 
</div> 

संपादित करें: मैं सीएसएस जोड़ने के लिए भूल गए, लेकिन यहां मुख्य बिंदु यह है कि आप #main के बच्चे को विभाजित बाएं होने के लिए चाहते हैं।

जावास्क्रिप्ट:

function() { 
     var window_width = jQuery(window).width(), 
      container = jQuery('#main'), 
      page_width = 0; 

     // Grab every child element of the "main" container 
     container.children().each(function(index){ 
      var incl_margin = true, 
       $this = jQuery(this); 

      // Check if each child element has a margin-left or margin-right 
      if (parseInt($this.css('margin-left')) < 0 || parseInt($this.css('margin-right')) < 0) { 
       var incl_margin = false; 
      } 

      // Get element's width including margins (if they exist from above) 
      var width = $this.outerWidth(incl_margin); 
      page_width += width; 

     }); 

     // Add total width of containers elements as the containers width 
     if(page_width > 0) 
      container.css({'width' : page_width + 'px'}); 
    } 
} 

Answer 2

ऐसा करने के कई तरीके हैं।

आप पेज की सही चौड़ाई तुम सिर्फ एक आवरण div कर सकते हैं पता है, पूरी चौड़ाई निर्धारित करते हैं, और उसके बाद तो जैसे आवरण के अंदर की ओर से अपनी सामग्री divs ओर फ्लोट:

<div style="width: 2500px; border: red solid 1px;"> 
    <div style="width: 500px; float: left;">Content</div> 
    <div style="width: 500px; float: left;">Content</div> 
    <div style="width: 500px; float: left;">Content</div> 
    <div style="width: 500px; float: left;">Content</div> 
    <div style="width: 500px; float: left;">Content</div> 
</div> 

आप तो सटीक चौड़ाई को जानें, यह सबसे आसान समाधान है।

यदि चौड़ाई अज्ञात है या भिन्न होती है, तो आप पूर्ण चौड़ाई की गणना करने के लिए जावास्क्रिप्ट का उपयोग कर सकते हैं और उसी परिणाम के साथ रैपर पर इसे लागू कर सकते हैं। यह ज्यादातर जरूरतों के लिए काम करना चाहिए।