<img> तत्व और प्रदर्शन: तालिका-सेल

Question

मैं छवि क्षैतिज पंक्ति में छवियों को प्रतिस्थापित करने की कोशिश कर रहा हूं - तालिका पंक्ति में कक्षों के रूप में।

वह लेआउट किसी अन्य तत्व के साथ काम करता है लेकिन <img> के साथ किसी कारण से नहीं।

चेक करें:

div { display:table; border:1px solid red; } 
 
div > img { display:table-cell; }

<p>These shall be replaced in single row but they are not:</p> 
 

 
<div> 
 
    <img src="http://lorempixel.com/output/city-q-c-78-50-6.jpg"> 
 
    <img src="http://lorempixel.com/output/people-q-c-78-50-5.jpg"> 
 
    <img src="http://lorempixel.com/output/animals-q-c-78-50-5.jpg"> 
 
</div>

किसी भी विचार?

अद्यतन: एफएफ सीएसएस स्पेक का पालन करता है और उन्हें एकल पंक्ति में बदल देता है। अन्य सभी ब्राउज़र्स नहीं हैं। हेइल फ़ायरफ़ॉक्स!

Answer 1

संपादित

img, एक की जगह तत्व है यह गणना मापा जाता है और बॉक्स मॉडल अलग हैं। आप तालिका का उपयोग पर जोर देते हैं और @StevenThomas's PenCode

मैं सभी divs

.container { display: table; table-layout: auto; width: 100%; } 

img { display: inline-table; margin: .33em; width: 30%; height: auto; } 

हटाया के इस दोराहे पर नज़र रिक्ति के बारे में चिंतित हैं, तो इस ARTICLE

---

देखें

उपयोग margin: .125em अगर आप 4px चाहते ; सीमा-रिक्ति। इनलाइन-ब्लॉक

---

div बदलें करने के लिए

img बदलें इनलाइन-ब्लॉक करने के लिए

div { 
 
    display: inline-block; 
 
    border: 1px solid red; 
 
} 
 
div > img { 
 
    display: inline-block; 
 
}

<p>These shall be replaced in single row but they are not:</p> 
 

 
<div> 
 
    <img src="http://lorempixel.com/output/city-q-c-78-50-6.jpg"> 
 
    <img src="http://lorempixel.com/output/people-q-c-78-50-5.jpg"> 
 
    <img src="http://lorempixel.com/output/animals-q-c-78-50-5.jpg"> 
 
</div>

Answer 2

एक div के बजाय

, आप एक तालिका का उपयोग कर की कोशिश कर सकते। यहां वाक्यविन्यास है:

<table> 
    <tr> 
    <td></td> 
    <td></td> 
    <td></td> 
    </tr> 
    <tr> 
    <td></td> 
    <td></td> 
    <td></td> 
    </tr> 
    </table> 

टी टैग पंक्तियां हैं, टीडी टैग कॉलम हैं। मैं इस वाक्यविन्यास का उपयोग करता हूं:

<table> 
<tr> 
<td><img src="http://lorempixel.com/output/city-q-c-78-50-6.jpg"></td> 
<td><img src="http://lorempixel.com/output/people-q-c-78-50-5.jpg"></td> 
<td><img src="http://lorempixel.com/output/animals-q-c-78-50-5.jpg"></td> 
</tr> 
</table>