如何div宽度自动调整里面的图片/内容？

Question

演示 Fiddle : http://jsfiddle.net/UI_Designer/2gqy9s9k/1/

容器有 4 个块..每个 div 包含 width:25%.. 所以装满容器...

如果我删除任何一个 div 容器有空 space.. 但我想再次装满容器.. 有可能吗？

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

Answer 1

您可以在容器上使用 display: table 和 table-layout: fixed 来固定列中的相同宽度。
在您的 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 2

您可以为此使用 display: table; & display: table-cell。我很确定这就是你的意思。

Table 个单元格占据剩余 space 个单元格。所以只要像这样使用它，取出其中一张图像，你就会看到它是如何工作的。

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

或者，如果您只需要支持现代浏览器，您可以使用 flexbox...

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

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

Answer 4

经典方式是 display: table-cell，但 Flexbox 绝对是未来。

使用 Flexbox 您可以轻松实现这一点，现在所有主流浏览器都支持它的第三个版本，即 "standard" 版本。

运行代码段并向下滚动。

.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> <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 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, and take a look at Flexy Boxes，这是一个非常棒的工具，可以直观地创建已添加前缀的 Flex 代码。

如何div宽度自动调整里面的图片/内容？

how to div width automatically adjust inside images / content?

html

css

width

responsive-design