div宽度如何自动调整图像/内容?

时间:2015-04-28 12:22:27

标签: html css3 responsive-design width

演示小提琴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%;
}

4 个答案:

答案 0 :(得分:5)

您可以使用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>

答案 1 :(得分:4)

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>

答案 2 :(得分: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/

答案 3 :(得分:0)

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

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

运行代码段并向下滚动。

.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代码的神奇工具。