1. घर
  2. सवाल और जवाब
  3. टेक्स्ट-एलाइन: औचित्य और छवियां

टेक्स्ट-एलाइन: औचित्य और छवियां

2009-09-23 13 views
9

मेरे पास छवियों की एक सूची है (सूची में नहीं, लेकिन अगर यह समस्या हल हो सकती है) तो मैं एक div की पूरी चौड़ाई को भरना चाहता हूं। मैंने नीचे दिए गए कोड को आजमाया है, और जब यह पी टैग में किसी भी पाठ को औचित्य देता है तो यह छवियों के लिए समान नहीं होता है। मैं div की पूरी चौड़ाई में छवियों को समान रूप से स्थानांतरित करने के लिए कैसे प्राप्त कर सकता हूं?टेक्स्ट-एलाइन: औचित्य और छवियां

<div> 
    <p> 
    <img src="image1.png" alt="foo" /> 
    <img src="image2.png" alt="foo" /> 
    <img src="image3.png" alt="foo" /> 
    <img src="image4.png" alt="foo" /> 
    <img src="image5.png" alt="foo" /> 
    </p> 
</div>

मेरे सीएसएस:

div { width: 30em; } 
p { text-align: justify; }

स्रोत

2009-09-23 chrism

+0

लगाने से जोड़ने के लिए भूल: छवियों की संख्या निश्चित नहीं है, तो मैं एक समाधान है कि नहीं करता है चाहता हूँ यह जानने पर भरोसा नहीं है कि कितने होंगे। – chrism

+0

के रूप में मैं अपने जवाब में लिखा है, आप प्रवेश जावास्क्रिप्ट का उपयोग करने के लिए तैयार हैं, तो उत्तर मैं समायोजित छवियों के किसी भी संख्या के लिए प्रदान की है। –

उत्तर

2

उचित पाठ में, एक पैराग्राफ में पाठ की अंतिम पंक्ति पूरी चौड़ाई को भरने के लिए विस्तार नहीं है। तो फैला आप दो या अधिक लाइनों के लिए बाहर पैरा खींचने के लिए पर्याप्त सामग्री की जरूरत है इनलाइन चित्र, जैसे .:

<div> 
    <p> 
     <img src="image1.png" alt="foo" /> 
     <img src="image2.png" alt="foo" /> 
     <img src="image3.png" alt="foo" /> 
     <img src="image4.png" alt="foo" /> 
     <img src="image5.png" alt="foo" /> 
     xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx 
    </p> 
</div>

बनाने के लिए (या कुछ अन्य समान रूप से-बदसूरत लेकिन कम-से दिखाई &nbsp; शामिल संस्करण है।) इस एक बुरा हैक का एक सा है।

स्रोत

2009-09-23 09:46:59 bobince

+0

आप '     ...' – DisgruntledGoat

0

यह जावास्क्रिप्ट पक्षों के लिए middleand से div से अधिक छवियों फैल जाएगा:

var container = document.getElementById("imageContainer"); 
var imageList = container.getElementsByTagName("img"); 

var totalWidth = container.offsetWidth; 
var sliceWidth = totalWidth/imageList.length; 

for(i = 0; i < imageList.length; i++) 
{ 
    var totalMargin = sliceWidth - imageList[i].offsetWidth; 
    var margin = totalMargin/2; 

    imageList[i].style.margin = "0px " + margin + "px 0px " + margin + "px" 
}

स्क्रिप्ट चीजों के एक जोड़े मान;

  1. div (imageContainer) के एक आईडी
  2. सभी छवियों एक ही चौड़ाई
  3. मेरी convinience मैं केवल IE7 में परीक्षण किया के लिए होना आवश्यक है, वहाँ चीजें हैं जो मैं के बारे में यकीन नहीं है कर रहे हैं होना चाहिए जैसे "ऑफ़सेटविड्थ" जो फ़ायरफ़ॉक्स आदि में भिन्न हो सकता है लेकिन यह आपके लिए स्क्रिप्ट की अवधारणा प्राप्त करने के लिए अधिकतर है।

आप निश्चित रूप से परिवर्तनीय छवि चौड़ाई और आगे के लिए समर्थन जोड़ सकते हैं, लेकिन यह वास्तव में यहां के दायरे में नहीं था।

यह स्क्रिप्ट छवियों को जोड़ने या हटाने के लिए समान रूप से छवियों को वितरित करेगी, एक सीमा तक संभोग। यदि छवियों की कुल चौड़ाई div की चौड़ाई से अधिक है, तो रैपिंग होगी।

उम्मीद है कि यह मदद करता है!

स्रोत

2009-09-23 10:02:49

+0

केवल सीएसएस के माध्यम से लेआउट छवियों को आजमाने के बाद जेएस का उपयोग करें, केवल जेएस पर भरोसा न करें! – dusoft

+0

यह एक अच्छा समाधान है! लेकिन केवल काम करता है अगर वहाँ छवियों में से एक लाइन। इस बहु-लाइन मामलों को भी बढ़ाया जा सकता है? –

0 
<!-- not elegant --> 
    <div style="color:backgroundcolor"> 
     <p> 
     <img src="image1.png" alt="foo" 
     /><em>.</em> 
     <img src="image2.png" alt="foo" 
     /><em>.</em> 
     <img src="image3.png" alt="foo" 
     /><em>.</em> 
     <img src="image4.png" alt="foo" 
     /><em>.</em> 
     <img src="image5.png" alt="foo" /> 
     </p> 
    </div> 

    My CSS: 

    div { width: 30em; } 
    p { text-align: justify; }

स्रोत

2011-06-25 19:41:46 anonym

2

मुझे एहसास है कि यह पुराना है लेकिन मैंने सोचा कि मैं एक साधारण समाधान जोड़ूंगा।
text-align: justify केवल तभी काम करेगा यदि एक से अधिक पंक्तियां हैं (यदि आप पाठ के अनुच्छेद पर इसका उपयोग करते हैं, तो आप देखेंगे कि अंतिम पंक्ति उचित नहीं है)। इस छोटे jQuery विस्तार तत्व आप को सही ठहराने और इस तरह की कोशिश कर रहे करने के लिए एक अदृश्य तत्व जोड़ देगा, आपकी छवियों समान रूप से बांट दिया जाएगा:

$.fn.justify = function() { 
$(this).css("text-align", "justify"); 
$(this).append("<span style='display: inline-block;visibility: hidden;width:100%'></span>"); 
}

फिर तुम सब करने की जरूरत है कॉल:

$("#your-element").justify();

स्रोत

2011-11-23 10:07:11 goangus

4

छवियों को इनलाइन प्रदर्शित किया जाता है ताकि आप पाठ-संरेखण का भी उपयोग कर सकें: सीएसएस के साथ अपनी छवियों को संरेखित करने के लिए सीएसएस संपत्ति को उचित ठहराना। जैसा कि अन्य सुझाव देते हैं, यदि आप अंतिम पंक्ति को औचित्य देना चाहते हैं तो आपको अपनी छवि सूची के अंत में पूर्ण चौड़ाई लेने वाली कुछ प्रकार या खाली छवि डालना होगा।

http://fiddle.jshell.net/ewv6K/show/

<!DOCTYPE html> 
<title> 
    Justified Images example 
</title> 
<style> 
    body { 
     text-align:center; 
    } 
    #container { 
     width:800px; 
     text-align:justify; 
     margin-left:auto; 
     margin-right:auto; 
    } 
    #force { 
     width:100%; 
     height:0px; 
    } 
</style> 
<div id="container"> 
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/ae/AfricanWildCat.jpg/220px-AfricanWildCat.jpg" alt="cat 1"> 
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/WhiteCat.jpg/220px-WhiteCat.jpg" alt="cat 2"> 
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Ojo_de_gata_trim.jpg/220px-Ojo_de_gata_trim.jpg" alt="cat 3"> 
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/41/Scheme_cat_anatomy-en.svg/220px-Scheme_cat_anatomy-en.svg.png" alt="cat 4"> 
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Olhos_de_um_gato-3.jpg/220px-Olhos_de_um_gato-3.jpg" alt="cat 5"> 
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/6d/Listen%2C_do_you_want_to_know_a_secret.jpg/220px-Listen%2C_do_you_want_to_know_a_secret.jpg" alt="cat 6"> 
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/ae/AfricanWildCat.jpg/220px-AfricanWildCat.jpg" alt="cat 1"> 
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/WhiteCat.jpg/220px-WhiteCat.jpg" alt="cat 2"> 
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Ojo_de_gata_trim.jpg/220px-Ojo_de_gata_trim.jpg" alt="cat 3"> 
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/41/Scheme_cat_anatomy-en.svg/220px-Scheme_cat_anatomy-en.svg.png" alt="cat 4"> 
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Olhos_de_um_gato-3.jpg/220px-Olhos_de_um_gato-3.jpg" alt="cat 5"> 
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/6d/Listen%2C_do_you_want_to_know_a_secret.jpg/220px-Listen%2C_do_you_want_to_know_a_secret.jpg" alt="cat 6"> 
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/ae/AfricanWildCat.jpg/220px-AfricanWildCat.jpg" alt="cat 1"> 
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/WhiteCat.jpg/220px-WhiteCat.jpg" alt="cat 2"> 
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Ojo_de_gata_trim.jpg/220px-Ojo_de_gata_trim.jpg" alt="cat 3"> 
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/41/Scheme_cat_anatomy-en.svg/220px-Scheme_cat_anatomy-en.svg.png" alt="cat 4"> 
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Olhos_de_um_gato-3.jpg/220px-Olhos_de_um_gato-3.jpg" alt="cat 5"> 
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/6d/Listen%2C_do_you_want_to_know_a_secret.jpg/220px-Listen%2C_do_you_want_to_know_a_secret.jpg" alt="cat 6"> 
    <!-- Force the last row to be justifed - use a blank image here, not a real one like I have --> 
    <img id="force" src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Olhos_de_um_gato-3.jpg/220px-Olhos_de_um_gato-3.jpg" alt="end"> 
</div>​

स्रोत

2012-03-14 11:19:10

16

बनाने के लिए सबसे आसान तरीका देखें यह है:

<style> 
    .justify-image{ text-align: justify;} 
    .justify-image img{display:inline-block;} 
    .justify-image:after{content:""; display: inline-block; width: 100%; height: 0;} 
</style> 

<p class="justify-image"> 
    <img src="/path/img.jpg" alt="my image"> 
    <img src="/path/img.jpg" alt="my image"> 
    <img src="/path/img.jpg" alt="my image"> 
    <img src="/path/img.jpg" alt="my image"> 
    <img src="/path/img.jpg" alt="my image"> 
    <img src="/path/img.jpg" alt="my image"> 
</p>
  1. आप पाठ के अनुरूप के साथ एक कंटेनर की जरूरत है: का औचित्य साबित;, इस मामले में अनुच्छेद।
  2. आपकी छवियों को डिस्प्ले होने की आवश्यकता है: इनलाइन-ब्लॉक; अन्यथा वे "टेक्स्ट" के रूप में बातचीत नहीं करेंगे (टेक्स्ट को औचित्य देने में अंतिम पंक्ति प्रभावित नहीं होती है, आपको इसे काम करने के लिए एक जोड़ने की आवश्यकता है)
  3. आपको लागू करने के लिए अपनी छवियों के तहत "टेक्स्ट" की एक पंक्ति की आवश्यकता है, छद्म- तत्व आप एक * बनाने के द्वारा यह आसानी से प्राप्त कर सकते हैं: के बाद

*: के बाद: सामग्री को न भूलें: ""; इसके बिना यह प्रकट नहीं होगा। मेरे उदाहरण में मैंने एक इनलाइन-ब्लॉक, चौड़ाई 100% का उपयोग किया है। यह मेरे अनुच्छेद में सामग्री के बाद हमेशा लाइन तोड़ देगा।

हैप्पी कोडिंग! :)

स्रोत

2014-07-16 14:08:04 Cstyves

+0

परफेक्ट :) वह वही था जो मैं ढूंढ रहा था! – nbsp

+1

यह जवाब होना चाहिए। –

2

क्योंकि पिछले उत्तरों में कोई भी उल्लेख नहीं करता है। आजकल (2017) और कुछ समय पहले के लिए आप CSS3 flexbox, उपयोग कर सकते हैं संपत्ति justify-content:space-between

div { 
 
    display: flex; 
 
    justify-content: space-between 
 
}
<div> 
 
    <img src="//placehold.it/50" alt="foo" /> 
 
    <img src="//placehold.it/50" alt="foo" /> 
 
    <img src="//placehold.it/50" alt="foo" /> 
 
    <img src="//placehold.it/50" alt="foo" /> 
 
    <img src="//placehold.it/50" alt="foo" /> 
 
</div>

स्रोत

2017-03-23 15:22:25 dippas

संबंधित मुद्दे

 संबंधित मुद्दे