如何div宽度自动调整图像/内容？ [英] how to div width automatically adjust inside images / content?

问题描述

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

容器有4个块。每个 div 包含 width：25％ ..所以完成容器...

如果我删除任何一个 div container有空的空间..但我想再次实现容器..
它是可能的？

  .container {
 width：100％; 
 border：1px solid＃333 
} 
 .badge-block {
 float：left; 
 width：25％; 
} 
 .badge-block img {
 width：80％; 
} 
  

解决方案

$ c> display：table; & 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 =tooltiptitle =General Pack Rs.50class =badge-icon> < img src =http://www.globalniche.net/wp-content/uploads/2013/07/badge1.pngclass =img-responsive> < / a> < / div> < div class =badge-block> < a href =javascript ::data-toggle =tooltiptitle =General Pack Rs.50class =badge-icon> < img src =http://www.globalniche.net/wp-content/uploads/2013/07/badge1.pngclass =img-responsive> < / a> < / div> < div class =badge-block> < a href =javascript ::data-toggle =tooltiptitle =General Pack Rs.50class =badge-icon> < img src =http://www.globalniche.net/wp-content/uploads/2013/07/badge1.pngclass =img-responsive> < / a> < / div> < div class =badge-block> < a href =javascript ::data-toggle =tooltiptitle =General Pack Rs.50class =badge-icon> < img src =http://www.globalniche.net/wp-content/uploads/2013/07/badge1.pngclass =img-responsive> < / a> < / div>< / div>  

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

container have 4 blocks..Each div contain width:25%.. so fulfill the container...

If i remove any one div container have empty space.. but I want to again fulfill the container.. Its is possible?

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

解决方案

You can use display: table; & display: table-cell for this. Im pretty sure this is what you mean.

Table cells take up the left over space. So just use it like this, take one of the images out and you will see how it works.

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>

这篇关于如何div宽度自动调整图像/内容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！