-1
我有4列產品的頭部，描述和圖像在下面，我希望文本區域在頂部和圖像到每個排隊在底部，以便在屏幕調整大小時保持對齊。保持文本對齊的頂部和圖像對齊的相對高度div的底部
當圖像在文字環繞時上下移動 - 看起來非常不整齊，因爲它們每個都有不同的文字量。
我嘗試過使用表格和絕對位置，他們每個都會導致問題，並且無法正常工作。
這裏是我的代碼：
#product-landing .landing-row {
position: relative;
height: inherit;
}
.product-landing,
.product-landing-2,
.product-landing-3 {
margin-right: 2.0533%;
}
.product-landing,
.product-landing-2,
.product-landing-3,
.product-landing-4 {
margin-left: 0px;
display: inline-block;
position: relative;
height: 100%;
vertical-align: top;
width: 22.978%;
}
.product-landing-4 {
margin-right: 0px;
}
#product-landing p {
margin-top: 0px;
margin-bottom: 5px;
clear: both;
width: 100%;
}
.product-landing .land-image {
vertical-align: bottom;
}
.product-landing img,
.product-landing-2 img,
.product-landing-3 img,
.product-landing-4 img {
margin-top: 10px;
display: block;
max-width: 350px;
margin: 0 auto;
bottom: 0px;
width: 100%;
}<div id="product-landing">
<div class="landing-row">
<div class="product-landing">
<div id="product-text">
<div id="offer-title"><a href="/address" target="_blank">Product1</a></div>
<p>
</p>
<p><b><i>Product description</i></b></p>
</div>
<p class="land-image">
<a href="/address" target="_blank"><img src="http://image1.jpg"></a>
</p>
</div>
<div class="product-landing-2">
<div id="product-text">
<div id="offer-title"><a href="/address" target="_blank">Product2</a></div>
<p>
</p>
<p><b><i>Product description</i></b></p>
</div>
<p class="land-image">
<a href="/address" target="_blank"><img src="http://image2.jpg"></a>
</p>
</div>
<div class="product-landing-3">
<div id="product-text">
<div id="offer-title"><a href="/address" target="_blank">Product3</a></div>
<p>
</p>
<p><b><i>Product description</i></b></p>
</div>
<p class="land-image">
<a href="/address" target="_blank"><img src="http://image3.jpg"></a>
</p>
</div>
<div class="product-landing-4">
<div id="product-text">
<div id="offer-title"><a href="/address" target="_blank">Product4</a></div>
<p>
</p>
<p><b><i>Product description</i></b></p>
</div>
<p class="land-image">
<a href="/address" target="_blank"><img src="http://image4.jpg"></a>
</p>
</div>
</div>
</div>
沒有。只要文本包裝在其中一列（當屏幕被調整大小時），圖像就不會對齊。他們仍然對齊文本的底部而不是產品登陸框。 – LouiseW
@LouiseW你使用的是什麼瀏覽器 - 這種方式在邊緣即罰款，即鉻和火狐 - 你是說它不能在你的代碼中工作，或者上面的代碼不工作，因爲當我運行代碼段並使用整頁並調整屏幕大小，圖像始終保持對齊。您可能會注意到我已將您的無效ID（ID必須是唯一的）更改爲類，並將類似於類的奇怪ID更改爲使用一個類。這段代碼很明顯，所以它必須是代碼中的東西 – Pete
是的，我已經像在代碼中一樣將id更改爲類。我正在使用最新版本的Chrome和Firefox。我還檢查了safari，yandex，opera和IE 10以及更舊的瀏覽器，它也是如此。請記住，這裏顯示的描述文字比這裏顯示的要多得多，它在1到4行之間變化。 – LouiseW