Wie wird die div-Breite innerhalb von Bildern/Inhalten automatisch angepasst?

Question

Demo Fiddle: http://jsfiddle.net/UI_Designer/2gqy9s9k/1/

Behälter haben 4 blocks..Each div enthalten width:25% .. so erfüllen die Behälter ...

Wenn ich irgendeine div Behälter leeren Raum entfernen, .. aber ich will den Behälter wieder zu erfüllen .. ist es möglich?

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

Answer 1

können Sie display: table; & display: table-cell für diese. Ich bin mir ziemlich sicher, dass du das meinst.

Tabellenzellen belegen den verbleibenden Platz. Also benutze es einfach so, nimm eines der Bilder heraus und du wirst sehen wie es funktioniert.

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

Sie können die display: table auf Sie Behälter mit table-layout: fixed verwenden gleiche Breite in Ihre Spalten zu beheben.
In Ihrem div (Zellen) können Sie display: table-cell anwenden und Float entfernen.

Wie so:

.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 ist hier dein Freund.

.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>

Oder, wenn Sie nur moderne Browser unterstützen müssen Sie 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

Der klassische Weg ist mit display: table-cell verwenden können, aber Flexbox ist definitiv die Zukunft.

Mit Flexbox können Sie dies leicht erreichen, und alle großen Browser unterstützen es heutzutage in seiner dritten Version, der "Standard".

Führen Sie das Code-Snippet aus und scrollen Sie nach unten.

.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>

die Complete Guide to Flexbox Verpassen Sie nicht, und einen Blick auf Flexy Boxes nehmen, ein erstaunliches Werkzeug Flex bereits voran Code visuell zu erstellen.