尝试为此创建一个解决方案，创建一个ul li列表，显示等距间隔的项目，但使用百分比。
解决方案需要能够响应性地工作，即块（具有文本覆盖的图像）将减小尺寸，并且它们之间的空间减小到iPad尺寸。在典型的手机分辨率下，它们会叠加。
有三个元素，但使用百分比的优点是可以添加额外的元素，而无需重做大部分CSS。希望块（在这种情况下为li项）可以相应地调整它们的大小和空间。
我尝试使用here之类的等距CSS技巧，但它们并不适合做出响应。
我计划使用max-width:100%将图片调整为当前li的最大宽度，以便可以使用更大的图像而无需调整大小（节省交换图像时的时间和方法相同的图像可以在网站的其他地方使用）
li列表不需要使用，可以使用简单的div或span结构。
有什么想法吗？
第一期：在我的JS Fiddle示例中，您可以看到图片根据窗口大小对齐并调整大小。然而，最右边的元素并不与右边缘齐平（它们通常都是左对齐的）。虽然我添加了text-align:justify但它似乎没有产生所需的效果
第二个问题：三个不可分割是一个问题。 30％不是真正的第三，33％似乎推出它。
第三个问题：空白。有没有办法阻止放置在不同线路上的li之间的邪恶空白？我必须牺牲可读的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;}
margin:0;
padding:0;
}
list-style-type: none;
display: inline-block;
width:30%;
text-align:justify;
}
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%;
}
}
答案 0 :(得分：4)
这是一种方式：
我将li更改为float:left;而不是display:inline-block;并添加了margin-left: 1%;，并将宽度设置为32.333％以补偿1％的保证金并将其分散到整个div中。
这将使li的位置在左边1％的边距并且在右边截止1％所以你需要在ul上用负边距来计算，或者你可以添加一个位置类来执行此操作。
margin-left:-1%;
另一种方法是使容器宽度超过页面宽度，以便它们正确定位并使用负边距/填充来补偿将被切断的部分。
PS。只是注意到你不想要差距..删除1% margin并将li更改为33.333%
注意：我没有删除不需要的css。例如。 text-align:justify;所以你可以清理它。