在一個div內垂直分佈兩個圖像

我在一個固定大小div內有兩個相似的圖像。圖像被放置在另一個之下。我想要垂直分佈圖像，以便將一個img貼到頂部，另一個貼到底部。在一個div內垂直分佈兩個圖像

<div style='text-align: center; border: 1px solid black;'>text 
    <div style='border:1px solid black;height: 150px;'> 
     <img style='float: left; clear: both;' src='http://iconizer.net/files/Sketchdock_Ecommerce_Icons/orig/arrow-up-blue.png'> 
     <img style='float: left; clear: both;' src='http://iconizer.net/files/Sketchdock_Ecommerce_Icons/orig/arrow-down-blue.png'> 
    </div> 
</div>

enter image description here

來源

2015-05-26 andreikashin

你有一個例子嗎？你想讓它們均勻分開嗎？或者你想要一個被卡在頂部而另一個卡在底部嗎？我們需要更多信息。 –

[絕對定位]（https://developer.mozilla.org/en-US/docs/Web/CSS/position#Absolute_positioning）。 – Teemu

@Teemu是正確的。

將position: relative;添加到父DIV。
將position: absolute; bottom: 4px; left: 0;加到第二個img。

運行下面的代碼片段：

<div style='text-align: center; border: 1px solid black;'>text 
 
    <div style='position: relative; border: 1px solid black; height: 150px;'> 
 
     <img style='float: left; clear: both;' src='http://iconizer.net/files/Sketchdock_Ecommerce_Icons/orig/arrow-up-blue.png' /> 
 
     <img style='float: left; clear: both; position: absolute; bottom: 2px; left: 0;' src='http://iconizer.net/files/Sketchdock_Ecommerce_Icons/orig/arrow-down-blue.png' /> 
 
    </div> 
 
</div>

來源

2015-05-26 15:54:42

你應該給有關情況更多一些相關信息。如果圖像例如具有相同的色調，那麼它更容易解決這個問題，如果它們具有不同的暗淡度，則在實現期望的結果之前需要完成一些css調整。

來源

2015-05-26 15:45:20

我們假設它們具有相同的大小。 – andreikashin

在一個div內垂直分佈兩個圖像

回答

相關問題