html - 如何添加它们之间有间隙的并排图像？

Question

我已经尝试解决这个问题将近 6 个小时，只是为了让它在移动设备上响应。有人可以帮助我吗？这真的很难，我真的很想完成这个作业。

我希望它看起来像这样，但移动响应:https://imgur.com/kRcHUDJ

我只使用 HTML 和内联 CSS，希望有解决方案。

<center>
<div id="home-secondary" style ="display: inline-block";>
        <ul id="homepageGuide">
        <a href="/blog/"><img class="img-responsive" data-original="/uploads/button-1.png" />
        <p><img src="https://cdn.theatlantic.com/assets/media/img/mt/2019/07/GettyImages_138965532/lead_720_405.jpg?mod=1563813032" width="500px" alt="example one"></p>
        <span class="color-overlay"></span>
        </a></ul>
</div>

<div id="home-secondary" style ="display: inline-block";>
        <ul id="homepageGuide">
        <a href="/testimonials.php">
        <img class="img-responsive" data-original="/uploads/button-2.png" />
        <p><img src="https://cdn.theatlantic.com/assets/media/img/mt/2018/11/shutterstock_552503470/lead_720_405.jpg?mod=1541605820" width="500px" alt="example two"></p>
        <span class="color-overlay"></span>
        </a></ul>
</div>
</center>

此处演示:https://codepen.io/anon/pen/WVpwwX它在桌面上看起来确实运行良好，我想要实现的目标已经给出；但在移动方面，结果并不理想。我必须向右滚动才能看到完整的图像。

我的预期输出是在移动设备上查看时将图像堆叠在一起。谢谢大家。

Answer 1

快到了。图片需要为移动设备设置 ma​​x-width，这样它们会自动调整大小，而不是因为其 500 像素的宽度设置而超出屏幕。也将显示设置为 inline-block:

https://codepen.io/ZorlacMeister/pen/PMpNRK

您可以在 Chrome 中轻松测试。按 F12，然后单击看起来像两个并排直立的移动设备的小图标，然后重新加载页面以查看移动布局。

HTML

    <center>
<div id="home-secondary" style ="display: inline-block">

        <ul id="homepageGuide">
        <a href="/blog/"><img data-original="/uploads/button-1.png" />
        <p><img class='img-responsive' src="https://cdn.theatlantic.com/assets/media/img/mt/2019/07/GettyImages_138965532/lead_720_405.jpg?mod=1563813032" width="500px" alt="example one"></p>
        <span class="color-overlay"></span>
        </a></ul>
</div>

<div id="home-secondary" style ="display: inline-block">
        <ul id="homepageGuide">
        <a href="/testimonials.php">
        <img data-original="/uploads/button-2.png" />
        <p><img class='img-responsive'  src="https://cdn.theatlantic.com/assets/media/img/mt/2018/11/shutterstock_552503470/lead_720_405.jpg?mod=1541605820" width="500px" alt="example two"></p>
        <span class="color-overlay"></span>
        </a></ul>
</div>
</center>

CSS

.img-responsive {
  max-width:75%;
  display: inline-block;
}