Question

我有三个图像需要水平显示，它们之间没有间隙，每个图像上面的链接也需要可扩展到窗口大小。目前它们之间存在差距。

以下是我到目前为止所有相关的代码：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

编辑：此处还有当前显示方式的屏幕截图。 screenshot

Answer 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;
}

如何让三个水平图像彼此相邻显示

1 个答案: