इनलाइन-ब्लॉक साफ़ करना?

Question

मैं है

.centered-holder { 
    margin-left: auto; 
    margin-right: auto; 
    clear: left; 
    display: inline-block; 
} 

तो प्रत्येक पंक्ति में

<div class="centered-holder">misc content 1</div> 
<div class="centered-holder">misc content 2</div> 
<div class="centered-holder">misc content 3</div> 

मैं केवल चाहते हैं एक अधिकतम, यह वास्तव में संभव किसी भी तरह है? यह एक आईफोन एचटीएमएल 5 ऐप है, इसलिए पुराने ब्राउजर प्रतिबंध एक मुद्दा नहीं हैं।

Answer 1

अपने सीएसएस घोषणाओं और अपने मार्कअप की निर्भर है, लेकिन आप पैरेंट कंटेनर पर इस सीएसएस घोषणा डाल करने के लिए कोशिश कर सकते हैं: यदि आप एक ब्लॉक तत्व को .centered-holder को बदलने के लिए से बचने के

white-space: pre-line; 

इस दृष्टिकोण के साथ, और आप अभी भी पैरेंट कंटेनर पर text-align:center उदाहरण के लिए उपयोग कर सकते हैं।

---

पूर्व लाइन - यह मान एक भी अंतरिक्ष चरित्र में संक्षिप्त करने के लिए खाली स्थान के के दृश्यों का कारण होगा। पंक्ति ब्रेक भरने के लिए लाइन लाइन ब्रेक और मार्कअप में नई लाइनों पर (या उत्पन्न सामग्री में "\" की घटनाओं पर लाइन ब्रेक होंगे। दूसरे शब्दों में, यह सामान्य की तरह है, सिवाय इसके कि यह स्पष्ट लाइन ब्रेक का सम्मान करेगा।

आप सफेद-अंतरिक्ष के बारे में यहाँ और अधिक जानकारियां पा सकते हैं:

• http://reference.sitepoint.com/css/white-space
• http://www.w3.org/TR/css3-text/#white-space

---

समाप्त करने के लिए, आप इन सीएसएस घोषणाओं का उपयोग कर सकते हैं:

.parent-container { 
    white-space: pre-line /* Create new line for each DIV */; 
    line-height:0 /* Mask the extra lines */; 
    *white-space: pre /*FixIE7*/; 
    *word-wrap: break-word /*FixIE7*/; 
} 

.centered-holder { 
    display: inline-block; 
    line-height:100% /* Restore a default line-height */; 
    *display: inline /*FixIE7*/; 
    *zoom: 1 /*FixIE7*/; 
} 

मुझे यह प्रश्न बहुत रोचक मिला, इसलिए मैं आईई 6-7 (pre-line और inline-block फिक्सेस) के लिए सीएसएस घोषणा भी देता हूं। यह कुछ अन्य लोगों के लिए उपयोगी होना चाहिए जिनकी एक समान समस्या है।

Answer 2

यदि आप display: inline-block; हटाते हैं तो वे दूसरे के शीर्ष पर एक को ढेर करेंगे।

ब्लॉक-स्तर तत्व नई लाइन पर शुरू होते हैं, और एक डीआईवी डिफ़ॉल्ट रूप से ब्लॉक-स्तर होता है।

Answer 3

या आप इनलाइन-ब्लॉक के बाद डिस्प्ले ब्लॉक के साथ केवल एक div जोड़ सकते हैं।

.centered-holder { 
    margin-left: auto; 
    margin-right: auto; 
    clear: left; 
    display: inline-block; 
} 
.clear-inline { 
    display: block; 
} 

फिर

<div class="centered-holder">misc content 1</div> 
<div class="clear-inline"></div> 
<div class="centered-holder">misc content 2</div> 
<div class="clear-inline"></div> 
<div class="centered-holder">misc content 3</div> 
<div class="clear-inline"></div>