试图为此提出一个解决方案，该解决方案创建一个ul li列表，该列表显示等距的项目，但使用百分比。
该解决方案需要能够响应式地工作，即块（带有文本覆盖的图像）的大小将减小，它们之间的空间将缩小到 iPad 大小。在典型的手机分辨率下，它们会堆叠。
共有三个元素，但使用百分比的好处是可以添加一个额外的元素，而无需重做大量 CSS。希望块（在这种情况下为li项目）会相应地调整它们的大小和空间。
我尝试在这里玩一些等距的 CSS 技巧，但它们并不真正适合响应式。
我计划使用max-width:100%将图像调整为当前的最大宽度，li以便可以使用更大的图像而无需调整大小（在交换图像时节省时间，并且意味着可以在网站的其他地方使用相同的图像）
lilist 不需要使用，可以使用简单的divorspan结构。
有任何想法吗？
第一个问题：在我的JS Fiddle示例中，您可以看到图像根据窗口大小对齐和调整大小。然而，最右边的元素不与右边缘齐平（它们通常都是左对齐的）。虽然我已经添加了text-align:justify它似乎没有达到预期的效果
第二个问题：三个不可分是个问题。30% 不是真正的三分之一，而 33% 似乎将其排除在外。
第三个问题：空白。有没有办法阻止li放置在不同行的 's 之间的邪恶空白？我必须牺牲可读的 HTML 来摆脱空格吗？
HTML：
<div id="bottomWide">
<ul>
<li><img src="#" alt="text"></li>
<li><img src="#" alt="text"></li>
<li><img src="#" alt="text"></li>
</ul>
</div>
CSS：
底宽{
width:85%;
margin:0 auto;
border:1px solid red;}
底宽 ul{
margin:0;
padding:0;
}
bottomWide li{
list-style-type: none;
display: inline-block;
width:30%;
text-align:justify;
}
底宽img{
max-width:100%;
}
用于堆叠的媒体查询（效果很好）
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-width : 320px)
and (max-width : 480px) {
/* Styles */
#bottomWide li{
display:block;
width:100%;
}
}