• के साथ टेक्स्ट प्रदर्शित करें जिसमें [बंद] है - एचटीएमएल, सीएसएस, एचटीएमएल 5, छवि, एचटीएमएल-सूचियां
  • मैं दिखाए गए चित्र के नीचे या ऊपर पाठ प्रदर्शित करने की कोशिश कर रहा हूं:

    और वर्तमान में, मैं केवल छवियों को प्रदर्शित करने के साथ अटक गया हूं (उदाहरण दिया गया है):

    मैं W3schools द्वारा प्रदान किए गए सटीक कोड का उपयोग नहीं कर सकताक्योंकि मेरे थंबनेल विस्तारित होते हैं और क्लिक करते समय उत्तरदायी कैरोसेल में स्विच करते हैं। मैं केवल थंबनेल के साथ नाम दिखाना चाहता हूं। मैं अपना कोड पोस्ट नहीं कर सकता इसलिए मैंने अपनी ली> टैग के साथ एक छवि अपलोड की है:

    <div class="container">
    <ul id="myGallery">
    <li><img src="/images/link.png" /></li>
    <li><img src="/images/link.png" /></li>
    <li><img src="/images/link.png" /></li>
    <li><img src="/images/link.png" /></li>
    <li><img src="/images/link.png" /></li>
    </ul>
    </div>
    

    उत्तर:

    उत्तर № 1 के लिए 1

    आप बस उपयोग कर सकते हैं flex ऐसा करने के लिए।

    नीचे कुछ पसंद है

    ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    }
    
    ul li {
    margin: 0 5px 5px 0;
    text-align: center;
    border: 1px solid #000;
    }
    <div class="container">
    <ul id="myGallery">
    <li>
    <img src="/images/http://lorempixel.com/100/100/nature/1/" width="100px" height="100px" />
    <p>First image</p>
    </li>
    <li>
    <img src="/images/http://lorempixel.com/100/100/nature/2/" width="100px" height="100px" />
    <p>Second image</p>
    </li>
    <li>
    <img src="/images/http://lorempixel.com/100/100/nature/1/" width="100px" height="100px" />
    <p>Third image</p>
    </li>
    <li>
    <img src="/images/http://lorempixel.com/100/100/nature/2/" width="100px" height="100px" />
    <p>Fourth image</p>
    </li>
    </ul>
    </div>

    दूसरा दृष्टिकोण, उपयोग करें figure

    नीचे कुछ पसंद है

    /*figure approach*/
    
    .figures {
    display: flex;
    flex-wrap: wrap;
    }
    
    figure {
    margin: 0;
    margin-right: 5px;
    text-align: center;
    border: 1px solid #000;
    }
    <div class="figures">
    <figure>
    <img src="/images/http://lorempixel.com/100/100/nature/1/" width="100px" height="100px" />
    <figcaption>First image</figcaption>
    </figure>
    <figure>
    <img src="/images/http://lorempixel.com/100/100/nature/2/" width="100px" height="100px" />
    <figcaption>Second image</figcaption>
    </figure>
    <figure>
    <img src="/images/http://lorempixel.com/100/100/nature/1/" width="100px" height="100px" />
    <figcaption>Third image</figcaption>
    </figure>
    <figure>
    <img src="/images/http://lorempixel.com/100/100/nature/2/" width="100px" height="100px" />
    <figcaption>Fourth image</figcaption>
    </figure>
    </div>

    अपडेट

    समस्या jsfiddle - https://jsfiddle.net/raw9b1fj/2

    समाधान jsfiddle - https://jsfiddle.net/raw9b1fj/4/


    संबंधित सवाल
    सबसे लोकप्रिय