jak podzielić szerokość automatycznie dopasować obrazy/zawartość?

Question

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

pojemnik posiada 4 blocks..Each div zawierają width:25% .. więc wypełnienia pojemnika ...

Jeśli mogę usunąć jeden div pojemnik mają pustą przestrzeń .. ale chcę aby ponownie wypełnić kontener .. Jest to możliwe?

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

Answer 1

Można użyć display: table; & display: table-cell do tego. Jestem pewien, że to właśnie masz na myśli.

Komórki tabeli zajmują lewą spację. Po prostu użyj tego w ten sposób, wyjmij jedno z obrazów i zobacz, jak to działa.

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

Można użyć display: table na ciebie pojemniku z table-layout: fixed naprawić samą szerokość w kolumnach.
W swoim dziale (komórki) można zastosować display: table-cell i usunąć float.

tak:

.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 jest Twój przyjaciel tutaj.

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

Lub, jeśli tylko trzeba obsługiwać nowoczesnych przeglądarek można użyć schematu 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

Klasycznym sposobem jest z display: table-cell, ale Flexbox to zdecydowanie przyszłość.

Dzięki Flexbox możesz to łatwo osiągnąć, a wszystkie główne przeglądarki obsługują ją teraz w trzeciej wersji, "standardowej".

Uruchom fragment kodu i przewiń w dół.

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

Nie przegap Complete Guide to Flexbox i spojrzeć na Flexy Boxes, niesamowite narzędzie do tworzenia już przedrostkiem kodu Flex wizualnie.