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

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

您可以使用 grid layout 来实现这一点。

grid-gap: 1em; 指定元素之间的填充

center {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1em;
}

img {
  max-width: 100%;
}

<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>

Answer 2

快到了。图片需要为移动设备设置 max-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;
}

Answer 3

我将图像宽度设置为 100%，并在 <ul> 上使用了一个 class 命名列来设置框大小、浮动相对宽度和显示。

我还将 <ul> 填充设置为 2.5%。

Check it on Codepen or below

.column {
  box-sizing: border-box;
  float: left;
  width: 50%;
  display: inline-block;
}

ul{

padding-left: 2.5%;
padding-right: 2.5%;
}

<center>
 <ul class="homepageGuide column">
  <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="100%" alt="example one">
   </p>
   <span class="color-overlay"></span>
        </a>
 </ul>
    <ul class="homepageGuide column">
  <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="100%" alt="example two">
   </p>
   <span class="color-overlay"></span>
        </a>
 </ul>
</center>

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

How to add Side by Side Image with A Gap Between Them?

html

css

inline

image