如何让三个水平图像并排显示答案

【问题标题】：How to get three horizontal images to display next to each other如何让三个水平图像并排显示
【发布时间】：2017-11-25 22:06:16
【问题描述】：

我有三个图像需要水平显示，它们之间没有间隙，每个图像顶部都有一个链接，它们还需要可缩放到窗口大小。目前，它们之间存在差距。

以下是我目前获得的所有相关代码：

.callout-container {
  position: relative;
  bottom: 480px;
  right: 0px;
}

.callout {
  position: relative;
  float: left;
  Width: 33.3%;
}

.button-1 {
  position: absolute;
  top: 160px;
  right: 1420px;
  color: white;
  background-color: rgb(224, 99, 38);
  padding: 10px;
  padding-left: 100px;
  padding-right: 100px;
  font-family: Futura;
  font-size: 20pt;
  opacity: 0.9;
}

.button-2 {
  position: absolute;
  top: 160px;
  right: 825px;
  color: white;
  background-color: rgb(224, 99, 38);
  padding: 10px;
  padding-left: 100px;
  padding-right: 100px;
  font-family: Futura;
  opacity: 0.9;
  font-size: 20pt;
}

.button-3 {
  position: absolute;
  top: 160px;
  right: 220px;
  color: white;
  background-color: rgb(224, 99, 38);
  padding: 10px;
  padding-left: 100px;
  padding-right: 100px;
  font-family: Futura;
  opacity: 0.9;
  font-size: 20pt;
}

<div class="callout-container">
  <div>
    <div class="callout-one callout">
      <img src="callout_1.png" alt="">
    </div>
    <div class="callout-two callout">
      <img src="callout_2.png" alt="">
    </div>
    <div class="callout-three callout">
      <img src="callout_3.png" alt="">
    </div>
  </div>
  <div>
    <div>
      <a href="" class="button-1" style="text-decoration:none;">
                Property Owner?
            </a>
    </div>
    <div>
      <a href="" class="button-2" style="text-decoration:none;">
                City Visitor?
            </a>
    </div>
    <div>
      <a href="" class="button-3" style="text-decoration:none;"> 
                Teacher?
            </a>
    </div>
  </div>
</div>

编辑：这里也是它当前显示方式的屏幕截图。 screenshot

【问题讨论】：

代替位置，尝试显示：内联块；对于那些图像。
您的代码和描述似乎不一致。请改进您的代码和问题。确保您的代码提供Minimal, Complete and Verifiable Example。

标签： html css image layout

【解决方案1】：

如果我理解得很好，您希望链接与图像对齐吗？

我创建了一个 jsFiddle 来测试。 https://jsfiddle.net/mp9007/aL27fxm3/

我想我很接近想要你想要的了：

<div class="callout-container">
   <div>
      <div class="callout-one callout">
          <a href="" class="button-1" style="text-decoration:none;"> Property Owner?</a>
      <!-- image -->
      </div>
   <div class="callout-two callout">
      <a href="" class="button-2" style="text-decoration:none;"> City visitor?</a>
      <!-- image -->
   </div>
   <div class="callout-three callout">
       <a href="" class="button-3" style="text-decoration:none;"> Teacher?</a>
      <!-- image -->
    </div>
 </div>

然后从 css 按钮类中移除绝对/右对齐

.button-3{
   position: absolute;
   top: 160px;
   //right: 220px;
   color: white;
   background-color: rgb(224, 99, 38);
   padding: 10px;
   padding-left: 100px;
   padding-right: 100px;
   font-family: Futura;
   opacity: 0.9;
   font-size: 20pt;
}

【讨论】：