चौड़ाई को विभाजित करने के लिए स्वचालित रूप से छवियों/सामग्री के अंदर समायोजित कैसे करें?

Question

डेमो फिडल: http://jsfiddle.net/UI_Designer/2gqy9s9k/1/

कंटेनर 4 blocks..Each div होते width:25% .. कंटेनर तो पूरा ...

तो मैं किसी भी एक div कंटेनर को दूर खाली जगह है .. लेकिन मैं चाहता हूँ कंटेनर को फिर से पूरा करने के लिए .. यह संभव है?

.container{ 
    width:100%; 
    border:1px solid #333 
} 
.badge-block{ 
    float:left; 
    width: 25%; 
} 
.badge-block img{ 
    width:80%; 
} 

Answer 1

आप इस के लिए display: table; & display: table-cell उपयोग कर सकते हैं। मुझे यकीन है कि यह तुम्हारा मतलब है।

तालिका कक्ष बाईं ओर स्थान लेते हैं। तो बस इसे इस तरह इस्तेमाल करें, छवियों में से एक को बाहर ले जाएं और आप देखेंगे कि यह कैसे काम करता है।

Demo Here Too

.container { 
 
    width: 100%; 
 
    border: 1px solid #333; 
 
    display: table; 
 
} 
 
.badge-block { 
 
    display: table-cell; 
 
} 
 
.badge-block img { 
 
    width: 80%; 
 
}

<div class="container"> 
 
    <div class="badge-block"> 
 
    <a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"> 
 
     <img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> 
 
    </a> 
 

 
    </div> 
 
    <div class="badge-block"> 
 
    <a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"> 
 
     <img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> 
 
    </a> 
 

 
    </div> 
 
    <div class="badge-block"> 
 
    <a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"> 
 
     <img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> 
 
    </a> 
 

 
    </div> 
 
    <div class="badge-block"> 
 
    <a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"> 
 
     <img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> 
 
    </a> 
 

 
    </div> 
 
</div>

Answer 2

आप table-layout: fixed के साथ कंटेनर पर display: table का उपयोग अपने कॉलम में एक ही चौड़ाई तय करने के लिए कर सकते हैं।
अपने div (कोशिकाओं) में आप display: table-cell लागू कर सकते हैं और फ्लोट को हटा सकते हैं।

तो जैसा

:

.container { 
    display: table; 
    table-layout: fixed; // Fix all columns to same width 
    width:100%; 
    border:1px solid #333 
} 
.badge-block { 
    display: table-cell; 
    width: 100%; 
} 

http://jsfiddle.net/2gqy9s9k/4/

Answer 3

display: table-cell अपने दोस्त यहाँ है।

.container{ 
 
    width:100%; 
 
    border:1px solid #333; 
 
    display: table; 
 
} 
 
.badge-block{ 
 
    display: table-cell; 
 
} 
 
.badge-block img{ 
 
    width:80%; 
 
    
 
}

<div class="container"> 
 
\t <div class="badge-block"> 
 
\t \t <a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a> 
 
\t </div> 
 
\t <div class="badge-block"> 
 
\t \t <a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a> 
 
\t </div> 
 
\t <div class="badge-block"> 
 
\t \t <a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a> 
 
\t </div> 
 
\t <div class="badge-block"> 
 
\t \t <a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a> 
 
\t </div> 
 
</div> 
 

 
<div class="container"> 
 
\t <div class="badge-block"> 
 
\t \t <a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a> 
 
\t </div> 
 
\t <div class="badge-block"> 
 
\t \t <a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a> 
 
\t </div> 
 
\t <div class="badge-block"> 
 
\t \t <a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a> 
 
\t </div> 
 
</div>

या, यदि आप केवल आधुनिक ब्राउज़रों आप flexbox उपयोग कर सकते हैं का समर्थन करने की जरूरत है ...

.container{ 
 
    width:100%; 
 
    border:1px solid #333; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
} 
 

 
.badge-block img{ 
 
    width:80%; 
 
}

<div class="container"> 
 
\t <div class="badge-block"> 
 
\t \t <a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a> 
 
\t </div> 
 
\t <div class="badge-block"> 
 
\t \t <a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a> 
 
\t </div> 
 
\t <div class="badge-block"> 
 
\t \t <a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a> 
 
\t </div> 
 
\t <div class="badge-block"> 
 
\t \t <a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a> 
 
\t </div> 
 
</div> 
 
<div class="container"> 
 
\t <div class="badge-block"> 
 
\t \t <a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a> 
 
\t </div> 
 
\t <div class="badge-block"> 
 
\t \t <a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a> 
 
\t </div> 
 
\t <div class="badge-block"> 
 
\t \t <a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a> 
 
\t </div> 
 
</div>

Answer 4

बढ़िया तरीका display: table-cell के साथ है, लेकिन फ्लेक्सबॉक्स निश्चित रूप से भविष्य है।

Flexbox के साथ आप इसे आसानी से प्राप्त कर सकते हैं, और सभी प्रमुख ब्राउज़र आजकल अपने तीसरे संस्करण, "मानक" में इसका समर्थन कर रहे हैं।

कोड स्निपेट चलाएं और नीचे स्क्रॉल करें।

.container{  
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
} 
 

 
.badge-block{ 
 
    margin: 0 auto; 
 
} 
 

 
.img-responsive{ 
 
    width: 100%; 
 
}

<div class="container"><div class="badge-block"><a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a></div> \t <div class="badge-block"><a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a></div> \t <div class="badge-block"><a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a></div> \t <div class="badge-block"><a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a></div> \t <div class="badge-block"><a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a></div></div><div class="container"><div class="badge-block"><a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a></div><div class="badge-block"><a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a></div><div class="badge-block"><a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a></div><div class="badge-block"><a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a></div></div><div class="container"><div class="badge-block"><a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a></div><div class="badge-block"><a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a></div><div class="badge-block"><a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a></div></div><div class="container"><div class="badge-block"><a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a></div><div class="badge-block"><a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a></div></div><div class="container"><div class="badge-block"><a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a></div></div>

Complete Guide to Flexbox याद आती है, और Flexy Boxes पर एक नज़र डालें, नेत्रहीन पहले से ही पहले से जुड़ा हुआ फ्लेक्स कोड बनाने के लिए एक अद्भुत उपकरण है।