इनलाइन-ब्लॉक तत्वों के लिए एक कंटेनर को हटाना और लपेटना

Question

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

मैंने एचटीएमएल/सीएसएस को तोड़ दिया है और स्पष्टता के लिए केंद्र में प्रयास को हटा दिया है। यह http://jsfiddle.net/fe25H/1/

पर है ताकि तीसरे इनलाइन-ब्लॉक तत्व नीचे चला जाता है आप परिणाम विंडो का आकार बदलने के लिए, कंटेनर चौड़ाई भरता है और हम इस मिल: इस के बजाय

-----------------BODY------------------ 
|          | 
||-------------CONTAINER-------------|| 
||-INLINEBLOCK---INLINEBLOCK--  || 
|||____________||____________|  || 
||-INLINEBLOCK--      || 
|||____________|      || 
||___________________________________|| 
|_____________________________________| 

:

-----------------BODY------------------ 
|          | 
| |----------CONTAINER---------| | 
| |-INLINEBLOCK---INLINEBLOCK--| | 
| ||____________||____________|| | 
| |-INLINEBLOCK--    | | 
| ||____________|    | | 
| |____________________________| | 
|_____________________________________| 

जावास्क्रिप्ट समाधान के बारे में ptriek के उत्तर के आधार पर संपादित करें:

Ptriek का कोड एक उपयोगी प्रारंभिक बिंदु था; यह विशिष्ट मामले के लिए काम करता है, लेकिन सामान्य नहीं। मैंने इसे अधिक लचीला होने के लिए ज्यादातर लिखा है (http://jsfiddle.net/fe25H/5/ देखें)।

Answer 1

इसके बारे में कुछ सोचने के बाद, मैं ऊपर वेक्स की टिप्पणी से सहमत हूं।

तो मैं एक जावास्क्रिप्ट समाधान (jQuery) fiddled - मैं बहुत कोड सुधार किया जा सकता है, इस पर एक विशेषज्ञ नहीं हूँ - लेकिन मैं यह वास्तव में आप क्या जरूरत है करता है लगता है:

var resizeContainer = function() { 
 
    var w_window = $(window).width(); 
 
    var w_block = $('.inlineblock').width(); 
 
    if (w_window < w_block * 3 && w_window >= w_block * 2) { 
 
     $('.container').width(w_block * 2); 
 
    } else if (w_window < w_block * 2) { 
 
     $('.container').width(w_block); 
 
    } else { 
 
     $('.container').width(w_block * 3); 
 
    } 
 
}; 
 

 

 
$(document).ready(resizeContainer); 
 
$(window).resize(resizeContainer);

body { 
 
    text-align:center; 
 
} 
 
.container { 
 
    display: inline-block; 
 
    background-color: #aaa; 
 
    text-align:left; 
 
} 
 
.inlineblock { 
 
    display: inline-block; 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: #eee; 
 
}

<div class='container'> 
 
    <div class='inlineblock'></div> 
 
    <div class='inlineblock'></div> 
 
    <div class='inlineblock'></div> 
 
</div>

http://jsfiddle.net/ptriek/fe25H/4/

Answer 2

आप अपने इनलाइन ब्लॉक के अंत में अदृश्य प्लेसहोल्डर जोड़ सकते हैं। वह अंतिम पंक्ति को छोड़ देगा।

http://jsfiddle.net/aakt65x4/

हालांकि, अगर आप पहली पंक्ति को भरने नहीं है, पूरे बात बाईं ओर संरेखित दिखाई देगा।

HTML:

<!-- 
    Centers a group of boxes that wrap to the width of its container. 
    Also left-aligns them inside the container. 
    Issue: Does not center group if there aren't enough boxes to fill 
    the first row. 
    --> 
<div class="container"> 
    <div class="block"></div> 
    <div class="block"></div> 
    <div class="block"></div> 
    <div class="block"></div> 
    <div class="block"></div> 
    <div class="block"></div> 
    <div class="block"></div> 
    <div class="block"></div> 
    <div class="block"></div> 
    <div class="block"></div> 

    <!-- 
     How many placeholders do you need? 
     At least the number of blocks minus two. 
     --> 
    <div class="placeholder"></div> 
    <div class="placeholder"></div> 
    <div class="placeholder"></div> 
    <div class="placeholder"></div> 
    <div class="placeholder"></div> 
    <div class="placeholder"></div> 
    <div class="placeholder"></div> 
    <div class="placeholder"></div> 
</div> 

सीएसएस:

body { 
    text-align: center;  /* center a max-width container */ 
    font-size: 0;   /* remove spaces between blocks */ 
} 
.container {    /* you don't need this */ 
    background-color: #eee; /* so you can see what's happening */ 
    max-width: 960px;  /* to demonstrate the centering of a max-width container */ 
    display: inline-block; /* center the max-width container */ 
    text-align: center;  /* center the group of blocks */ 
} 
.block { 
    display: inline-block; /* left-align within the group */ 
    background-color: red; /* so you can see what's happening */ 
    height: 100px; 
    width: 100px; 
    margin: 10px; 
} 
.placeholder { 
    display: inline-block; /* add to the line of blocks */ 
    width: 120px;   /* width + margin of a block */ 
} 

Answer 3

मुद्दा कहा गया है मेरी सीएसएस ज्ञान मुझे पूरी तरह से विशुद्ध रूप से सीएसएस के साथ व्याख्या करने योग्य नहीं ले जाएगा, यह है, जहाँ तक।

माइक एम। लिन का उत्तर एक बहुत ही सरल तरीका है, मुझे रचनात्मकता पसंद है, लेकिन इसमें कुछ त्रुटियां हैं जिन पर मैं विस्तार कर सकता हूं।

नोट: अगर कोई सामान्य समाधान पाता है, तो कृपया हमें बताएं, क्योंकि किसी भी शरीर ने इसे नहीं किया है। एसी, अमेज़ॅन, रेडबबल, इसे कहीं भी हासिल नहीं किया जा सकता है ...

---

1)

आप की जरूरत नहीं है "2 शून्य से div मदों की सरणी की लंबाई", इस आइटम की बड़ी n के लिए computationally महंगा हो सकता है। इसके बजाय, एक अनुमानित नियम के रूप में, आपको कंटेनर में एक नई लाइन बनाने के लिए पर्याप्त प्लेसहोल्डर "ब्लॉक" की आवश्यकता है। वास्तव में, प्लेसहोल्डर की संख्या (स्यूडोकोड में) है:

let n = number of block items to display 
let n_max = number of block items that fit into one row 
let n_ph = number of "placeholder" block items 

/*if number of items exceeds max number for a row (starts a new line), then 
you'll need to start another line with n_max - 1 placeholders*/ 
if n >= n_max then 
    n_ph = n_max - 1 
end if 

//you don't need any placeholders if number of items fills all rows completely 
if n % n_max == 0 then 
    n_ph = 0 
end if 

सूचना है कि मैं मामले में जब n < n_max नहीं दिखाए हैं। यह मुश्किल है, और आपको n_ph मानों के साथ n < n_max के लिए मूल्यों को खेलना होगा। यदि आपको विभिन्न विंडो आकारों के लिए काम करने के लिए n_ph की आवश्यकता है, तो मैं एक विंडो चौड़ाई पर्यवेक्षक जोड़ने और आपके "उत्तरदायी" चौड़ाई बैंड के लिए प्लेसहोल्डर को जोड़ने या हटाने पर विचार करूंगा। यह एक दर्द है, लेकिन आप की संभावना या तो n < n_max कभी नहीं होगा, या, अपने n_max छोटा है और यह उत्तरदायी बैंड के लिए एक दर्द को "मैन्युअल टेलर" n_ph नहीं है।

2)

आप कंटेनर की जरूरत नहीं inline-block होने के लिए है। यह मेरे साथ या उसके बिना काम करता है।