我正在尝试使用下一个布局制作响应式网络：
该图像是自我描述的，但我要完成的是下一个：
<div id="container">
<ul>
<li><img src="first.jpg"></li>
<li><img src="second.jpg"></li>
<li><img src="third.jpg"></li>
</ul>
<ul>
<li><img src="first.jpg"></li>
<li><img src="second.jpg"></li>
<li><img src="third.jpg"></li>
</ul>
</div>
里面的所有图像<li>都是 350px 的正方形。我的想法是它们适合<ul>大小正确的 3 张图像（根据宽度，它们将被调整大小）。此外，它们必须是第一个和最后一个，没有边距，并且位于中间的中间，每边都有一点边距。
我知道如何以“老式”方式完成此任务，<div>使用左浮动、右浮动等创建各种，但我想知道在 CSS3 中是否存在一种简单的方法，因为我只需要支持现代浏览器。
提前致谢！