फिक्स्ड स्पेस (चर चौड़ाई)

Question

के साथ तत्वों को जस्टिफ़ाई करें मेरे पास इसमें एक तत्व संख्या के साथ एक कंटेनर है। तत्वों को उचित ठहराया जाना चाहिए लेकिन एक फिक्स स्पेस के साथ (उदा। 20px)। इसका मतलब है कि प्रत्येक तत्व की चौड़ाई को अनुकूलित करना होगा।

उदाहरण इस के लिए:

एचटीएमएल

<div class="container"> 
    <div> 
     <img src="..."> 
    </div> 
    <div> 
     <img src="..."> 
    </div> 
    <div> 
     <img src="..."> 
    </div> 
</div> 

सीएसएस

div.container { 
    text-align: justify; 
} 

div.container div { 
    display: inline-block; 
    margin-right: 20px; 
} 

div.container div img { 
    width: 100%; 
} 

अंत में

यह इस तरह दिखना चाहिए (इस तस्वीर के दो उदाहरण दिखाता है: 2 तत्वों और 3 तत्व; चौड़ाई गतिशील है लेकिन अंतरिक्ष फिक्स [20px]):

यह बच्चे तत्वों के अलग संख्या के साथ काम करना चाहिए।

क्या सीएसएस के साथ ऐसा करने का कोई पेशेवर तरीका है?

संपादित करें: मुझे यह उल्लेख करना चाहिए कि यह तय स्थान% -value है!

Answer 1

तो Flexbox का उपयोग कर एक विकल्प है, तो आप flex: 1 फ्लेक्स वस्तुओं और एक निश्चित मूल्य के साथ भी एक मार्जिन संपत्ति को इस प्रकार जोड़ सकते हैं:

EXAMPLE HERE

div.container { display: flex; } 

div.container div { 
    height: 50px; /* Just for demo */ 
    flex: 1; 
    margin-left: 20px; 
} 

div.container :first-child { margin-left: 0; } 

वास्तव में, flex: 1 एक है इस मामले में flex-grow: 1; के शॉर्टेंड।

Answer 2

आप इस के लिए display: table और display: table-cell उपयोग कर सकते हैं:

.container { 
 
    display: table; 
 
    width: 100%; 
 
    border-spacing: 10px 0; 
 
    border-collapse: separate; 
 
    background: palevioletred; 
 
} 
 
.container div { 
 
    display: table-cell; 
 
} 
 
.container img { 
 
    display: block; 
 
    width: 100%; 
 
    height: auto; 
 
}

<div class="container"> 
 
    <div><img src="//dummyimage.com/200x100/000/CCC"></div> 
 
    <div><img src="//dummyimage.com/300x100/000/CCC"></div> 
 
    <div><img src="//dummyimage.com/400x100/000/CCC"></div> 
 
</div> 
 
<hr/> 
 
<div class="container"> 
 
    <div><img src="//dummyimage.com/200x100/000/CCC"></div> 
 
    <div><img src="//dummyimage.com/400x100/000/CCC"></div> 
 
</div> 
 
<hr/> 
 
<div class="container"> 
 
    <div><img src="//dummyimage.com/600x100/000/CCC"></div> 
 
</div>