演示小提琴: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%;
}
答案 0 :(得分:5)
您可以使用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="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%;
}
答案 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代码的神奇工具。