將圖像對齊到頁面的底部

這似乎是一個常見問題，但我遇到了麻煩。當我設置我的CSS與將圖像對齊到頁面的底部

position: absolute; 
bottom: 0;

，所有我的圖片結束相互重疊，而不是彼此相鄰被顯示，在底部。我該如何解決這個問題？

編輯：代碼:: http://jsfiddle.net/5MXLb/

：因爲點擊時，目標圖像是應該去的網頁

:target{ 
position:absolute; 
top:0 
}

編輯的頂部，我不能在自己的div包住它們

div#main{ 
    text-align: center; 
} 

.gallery{ 
    display: inline-block; 
    height: 100%; 
} 

.gallery img{ 
    display: inline-block; 
    max-height: 10%; 
    bottom: 0; 
    position: absolute; 

} 
.gallery img:target{ 
    position: relative; 
    top: 0; 
    max-height: 90%; 
}

HTML：

<div id="main"> 
     <div class="gallery"> 
      <a href="#img1"><img id="img1" src="http://placehold.it/200" /></a> 
      <a href="#img2"><img id="img2" src="http://placehold.it/400" /></a> 
      <a href="#img3"><img id="img3" src="http://placehold.it/600" /></a> 
      <a href="#img4"><img id="img4" src="http://placehold.it/800" /></a> 
      <a href="#img5"><img id="img5" src="http://placehold.it/1000" /></a> 
     </div> 
     </div>

來源

2013-07-19 Eric Wolf

你能顯示代碼嗎？如果圖像數量有限且寬度已知，則可以考慮設置左側。或者將圖片保存在div中併爲div設置位置。 – Karthikeyan

嘗試「顯示：內嵌塊」。 –

更新了代碼，我確實已經內嵌塊 –

如果您只定位新的瀏覽器，你可以使用Flexbox的。 http://jsfiddle.net/5MXLb/1/

我只包括-webkit前綴版本。

div#main{ 
    text-align: center; 
    height: 100%; 
} 
html, body { height: 100%; } 
.gallery{ 
    display: -webkit-flex; 
    height: 100%; 
    -webkit-align-items: flex-end; 
    -webkit-justify-content: center; 
} 
/* this stops the shrinking of the items */ 
.gallery a { 
    -webkit-flex-shrink: 0; 
} 

.gallery img{ 
    display: inline-block; 
    max-height: 10%; 

} 
.gallery img:target{ 
    position: absolute; 
    top: 0; 
    max-height: 90%; 
    left: 50%; 
    -webkit-transform: translateX(-50%); 
}

但我認爲這就是你要找的。

來源

2013-07-19 04:18:32 kalley

這是完美的，除非我有許多圖像時，它們會堆疊在一起。請參閱截圖：https：//www.dropbox.com/s/h87exwlutd25h5b/Screen%20Shot%202013-07-19%20at%203.13.45%20AM。png –

你想讓它們變小嗎，還是你想讓容器滾動？我會看看我能否根據你的回答找出一些東西。 – kalley

我想容器滾動。（它目前只滾動一小部分） –

裹定位在絕對一個div內的圖像，並將其放置在底部像

<div> 
    <img src="http://dummyimage.com/100x100/000/ff0000" /> 
    <img src="http://dummyimage.com/100x100/000/ff0000" /> 
</div>

CSS：

div { 
    width:100%; 
    position: absolute; 
    bottom:0; 
} 
img { 
    position: relative; 
    display: block; 
    float: left; 
}

檢查您<a>這個fiddle

來源

2013-07-19 04:13:54 Praveen

正如我所提到的，「我不能將它們包裝在自己的div中，因爲點擊後，目標圖像應該會進入頁面的頂部」 –

設置CSS -

.gallery a{ 
    display: inline-block; 
    margin-right: 20px; 
    width:30px;  
}

Try This

更新後 -

Try This also

來源

2013-07-19 04:14:23

這會導致目標圖像無更長時間呆在中心？ –

我不明白你想要什麼。請參閱更新的「jsfiddle」。 –

我想要目標圖像水平居中。出於某種原因（使用Safari），所選圖像偏離中心 –

將圖像對齊到頁面的底部

回答

相關問題