如何讓三個水平圖像相鄰顯示

我有三個圖像需要水平顯示，它們之間沒有間隙，並且每個圖像的頂部都有一個鏈接，他們還需要對窗口大小進行縮放。目前它們之間存在差距。如何讓三個水平圖像相鄰顯示

這裏是所有相關的代碼，到目前爲止，我已經得到的：

.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

來源

2017-06-22 Game Vault

相反的位置，嘗試顯示：inline-block;爲那些圖像。 –

您的代碼和說明似乎不一致。可以請改善你的代碼和問題。確保你的代碼提供了一個[**最小，完整和可驗證的例子**]（http://stackoverflow.com/help/mcve）。 – hungerstar

如果我理解的很好，你想鏈接與圖像對齊？

我創建了一個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按鈕類中刪除的絕對/右alignement

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

來源

2017-06-22 15:00:58 mp9007

如何讓三個水平圖像相鄰顯示

回答

相關問題