如何自动调整内部图像/内容的 div 宽度？

Question

演示小提琴：http://jsfiddle.net/UI_Designer/2gqy9s9k/1/

容器有 4 个块..每个 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

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 3

您可以在容器上使用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 4

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

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

运行代码 sn-p 并向下滚动。

.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，看看Flexy Boxes，这是一个惊人的工具，可以直观地创建带有前缀的 Flex 代码。