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

提琴演示：

容器有4个块。每个

div

包含

宽度：25%

。。所以完成这个容器

如果我删除任何一个

div

容器，则该容器有空空间。。但是我想再次完成这个集装箱。。 这是可能的吗

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

---

您可以使用容器上的

display:table

和

table layout:fixed

来固定列中的相同宽度。
在div（单元格）中，您可以应用

display:table cell

并删除float

像这样：

.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%;
}

---

您可以使用

显示：表格&
显示：此的表格单元格
。我很确定这就是你的意思

表格单元格会占用剩余的空间。所以就这样使用它，拿出一张图片，你就会看到它是如何工作的



.container{
宽度：100%；
边框：1px实心#333；
显示：表格；
}
.徽章块{
显示：表格单元格；
}
.徽章块img{
宽度：80%；
}
显示：表格单元格
是您在这里的朋友


.container{
宽度：100%；
边框：1px实心#333；
显示：表格；
}
.徽章块{
显示：表格单元格；
}
.badge块img{
宽度：80%；
}
经典的方式是使用
显示：表格单元格
，但Flexbox肯定是未来的发展方向

有了它，你可以很容易地实现这一点，现在所有的主流浏览器都支持它的第三个版本，即“标准”版本

运行代码段并向下滚动


.container{
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
}
.徽章块{
保证金：0自动；
}
.img响应{
宽度：100%；
}
这让我很高兴：）@user10非常好，关于这方面的任何问题，请随时回来问。投票支持Flexbox方式