क्या सीएसएस के साथ फ़्लोटिंग एचटीएमएल तत्वों को न्यायसंगत बनाने के लिए कोई तरीका है?

Question

अनिवार्य रूप से, मैं "पाठ-संरेखण: औचित्य" के प्रभाव को प्राप्त करने की कोशिश कर रहा हूं लेकिन फ्लोटिंग ब्लॉक तत्वों के साथ। मेरे पास कई ब्लॉक हैं जिन्हें मैं औचित्य देना चाहता हूं।

आईई। प्रत्येक पंक्ति क्षैतिज रूप से दूरी पर है यह सुनिश्चित करने के लिए कि प्रत्येक पंक्ति की लंबाई समान है। (गैर-रगड़ दाएं किनारे)।

क्या सीएसएस के साथ ऐसा करने का कोई तरीका है? यदि नहीं, तो क्या यह प्राप्त करने के लिए कोई उपयुक्त जेएस लाइब्रेरी है? या यह सिर्फ अक्षम है?

Answer 1

यदि आइटम वास्तव में float आईएनजी नहीं हैं, तो आप position:absolute; left:1em; right:1em का उपयोग कर सकते हैं ताकि सीएसएस आपके लिए कुछ स्थित माता-पिता से ऑफसेट पर आधारित वस्तुओं की चौड़ाई की गणना कर सके।

यदि आप केवल float का उपयोग कर रहे हैं क्योंकि आपके पास कुछ ब्लॉक-स्तरीय आइटम हैं जो आप प्रवाह करने की कोशिश कर रहे हैं, तो उन्हें फ़्लोट करने के बजाय आइटम पर display:inline-block का उपयोग करें। यदि मूल तत्व में text-align:justify है तो आपको यह प्रभाव देना चाहिए (मुझे लगता है कि आप चाहते हैं)।

यहां एक simple test है जो आपको inline-block का परिणाम text-align:justify के साथ दिखा रहा है।

संपादित करें: मैंने सरल परीक्षण को और स्पष्ट रूप से दिखाया है कि बाएं और दाएं किनारों को हमेशा अंतिम पंक्ति के अलावा गठबंधन किया जाता है।

Answer 2

पिछले उत्तर को पूरा करना, यदि आप प्रोग्रामिंग रूप से बनाए गए डॉम नोड्स को संरेखित करना चाहते हैं (उदाहरण के लिए जावास्क्रिप्ट में document.createElement और parentElement.appendChild का उपयोग करके), गठबंधन तत्वों के बीच कोई सफेद स्थान नहीं जोड़ा जाएगा। यह संरेखण के काम नहीं कर सकता है।

https://jsfiddle.net/jc5qwyaw/

:

मेरे गूगल क्रोम 56.0.2924.87 और Firefox 51.0.1 (64-बिट) ब्राउज़र पर, aligment अगर वहाँ div तत्वों को अलग करने के किसी भी सफेद रिक्त स्थान नहीं हैं काम नहीं करता है

https://jsfiddle.net/oa8yeudr/

आप टिप्पणी हटाएं आदेश wrapDiv.appendChild(document.createTextNode(" "));, आप अंतर देख सकते हैं: वहाँ एक उदाहरण है जब मैं javaScript द्वारा डोम नोड्स पैदा करते हैं। संभव समाधान ऊपर दिखाए गए उदाहरण के रूप में div nodes के बाद एक सफेद स्पेस टेक्स्ट नोड जोड़ सकता है।

केवल क्रोम 56.0.2924.87 और फ़ायरफ़ॉक्स 51.0.1 (64-बिट) पर परीक्षण किया गया।