如何在一個元素的底部對齊圖像？

Question

我想將圖像（現在只是一個佔位符）放在其左欄的底部，我如何實現這一點？

我試着調整幅度爲<img>類。我認爲auto在頂部邊距（看我設置它的高度）將以相同的方式自動工作的中心項目工作。不用找了。

是否需要指定margin作爲圖像的頂部（取決於它的高度），還是我可以以另一種方式做到這一點？

我也試過vertical-align: bottom;，但再次沒有變化。

這裏是我的HTML：

<div class="pageArea"> 
    <div class="rowHalfImages"> 
    <div class="rowFirstPad"> <img width="100%" height="300px" /> </div> 
    </div> 
    <div class="rowHalf"> 
    <div class="rowSecondPad"> 
     <h1>DSC</h1> 
     <p class="introPara">Hello.</p> 
     <p>Lorem upsum diosks d amei sfor. More dojrn nbutforge absirns sie, for the siemssmsie a s. During which time the enovleo, will apela, hibt bdeue nf o the dirj, sisnr rufndf. Soerm iejrj ssleoe, orf risms, prod, ddvs sos anmd. Recent doejd aba dor the ssie dimjsiuend duekopmnvuer dmuie doe. Maolske, nfi sikeie. Adie dows. Osleifspd fi tje sos, gjsdijchfu.</p> 
     <p>Lorem upsum diosks d amei sfor. More dojrn nbutforge absirns sie, for the siemssmsie a s. During which time the enovleo, will apela, hibt bdeue nf o the dirj, sisnr rufndf. Soerm iejrj ssleoe, orf risms, prod, ddvs sos anmd. Recent doejd aba dor the ssie dimjsiuend duekopmnvuer dmuie doe. Maolske, nfi sikeie. Adie dows. Osleifspd fi tje sos, gjsdijchfu.</p> 
    </div> 
    </div> 
    <div class="clearBoth"></div> 
</div> 

我的CSS：

.pageArea { 
    max-width: 1200px; 
    margin: 0px auto; 
    padding: 0; 
} 
.rowHalf { 
    width: 50%; 
    float: right; 
    margin: 0; 
    padding: 0; 
} 
.rowHalfImages { 
    width: 50%; 
    float: left; 
    height: 100%; 
    padding: 0; 
} 
.rowFirstPad { 
    padding: 0 2% 0 2%; 
} 
.rowFirstPad img { 
    vertical-align: bottom; 
    margin: auto 0; 
} 
.rowSecondPad { 
    padding: 0 0 0 2%; 
} 

Answer 1

如果您使用display來代替float，事情會更容易（請參閱關於表的回答）。

Nowdays flex是安靜強大:(flex-fow:column + justify-content:space-between做到了）

.pageArea { 
 
    max-width: 1200px; 
 
    margin: 0px auto; 
 
    padding: 0; 
 
    display: flex; 
 
} 
 

 
.rowHalfImages, 
 
.rowHalf { 
 
    flex: 1; 
 
    margin: 1em 0; 
 
    padding: 0 1em; 
 
    background: lightgray; 
 
} 
 

 
.rowHalfImages { 
 
    position: relative; 
 
    display: flex; 
 
    flex-flow: column; 
 
    justify-content: space-between; 
 
}

<div class="pageArea"> 
 
    <div class="rowHalfImages"> 
 
    <img src="http://lorempixel.com/800/300/people" width="100%" /> 
 
     <img src="http://lorempixel.com/800/300/nature" width="100%" /> 
 
    </div> 
 
    <div class="rowHalf"> 
 
    <div class="rowSecondPad"> 
 
     <h1>DSC</h1> 
 
     <p class="introPara">Hello.</p> 
 
     <p>Lorem upsum diosks d amei sfor. More dojrn nbutforge absirns sie, for the siemssmsie a s. During which time the enovleo, will apela, hibt bdeue nf o the dirj, sisnr rufndf. Soerm iejrj ssleoe, orf risms, prod, ddvs sos anmd. Recent doejd aba dor 
 
     the ssie dimjsiuend duekopmnvuer dmuie doe. Maolske, nfi sikeie. Adie dows. Osleifspd fi tje sos, gjsdijchfu.</p> 
 
     <p>Lorem upsum diosks d amei sfor. More dojrn nbutforge absirns sie, for the siemssmsie a s. During which time the enovleo, will apela, hibt bdeue nf o the dirj, sisnr rufndf. Soerm iejrj ssleoe, orf risms, prod, ddvs sos anmd. Recent doejd aba dor 
 
     the ssie dimjsiuend duekopmnvuer dmuie doe. Maolske, nfi sikeie. Adie dows. Osleifspd fi tje sos, gjsdijchfu.</p> 
 
     <p>Lorem upsum diosks d amei sfor. More dojrn nbutforge absirns sie, for the siemssmsie a s. During which time the enovleo, will apela, hibt bdeue nf o the dirj, sisnr rufndf. Soerm iejrj ssleoe, orf risms, prod, ddvs sos anmd. Recent doejd aba dor 
 
     the ssie dimjsiuend duekopmnvuer dmuie doe. Maolske, nfi sikeie. Adie dows. Osleifspd fi tje sos, gjsdijchfu.</p> 
 
     <p>Lorem upsum diosks d amei sfor. More dojrn nbutforge absirns sie, for the siemssmsie a s. During which time the enovleo, will apela, hibt bdeue nf o the dirj, sisnr rufndf. Soerm iejrj ssleoe, orf risms, prod, ddvs sos anmd. Recent doejd aba dor 
 
     the ssie dimjsiuend duekopmnvuer dmuie doe. Maolske, nfi sikeie. Adie dows. Osleifspd fi tje sos, gjsdijchfu.</p> 
 
     <p>Lorem upsum diosks d amei sfor. More dojrn nbutforge absirns sie, for the siemssmsie a s. During which time the enovleo, will apela, hibt bdeue nf o the dirj, sisnr rufndf. Soerm iejrj ssleoe, orf risms, prod, ddvs sos anmd. Recent doejd aba dor 
 
     the ssie dimjsiuend duekopmnvuer dmuie doe. Maolske, nfi sikeie. Adie dows. Osleifspd fi tje sos, gjsdijchfu.</p> 
 
    </div> 
 
    </div> 
 
</div>

注：我已刪除了幾個股利

Answer 2

改變這個類像波紋管：

.rowFirstPad { 
    padding: 0 2% 0 2%;  
    padding-top: 100%; 
} 

通過改變百分比您可以設置如你所願！

Answer 3

簡單的方法是給.rowHalfImages一個位置：relative，然後將圖像放置在一個位置：絕對，這將允許您將圖像放置在底部，如果需要，還可以將其他事物置於頂部。

.rowHalfImages{ 
    position:relative; 
    height:auto; 
    /* other style you want */ 
} 
.rowHalfImages img { 
    position:absolute; 
    left:10px; 
    bottom:10px;` 
    /* other style you want */ 
} 

Answer 4

如果您想使用vertical-align，另一種方法是使用display：table。使用display：table有一些副作用，尤其是在較舊的瀏覽器上，但是在給定的設置中它可以正常工作。

.pageArea { 
    max-width: 1200px; 
    margin: 0 auto; 
    padding: 0; 
    display: table; 
} 
.rowHalf { 
    margin: 0; 
    padding: 0; 
} 
.rowHalfImages { 
    display:table-cell; 
    vertical-align: bottom; 
    padding: 0; 
} 
.rowFirstPad { 
    padding: 0 2%; 
} 
.rowFirstPad img { 
    display: block; 
} 

---

基本上，你也可以定位絕對和刪除一些您的html：

.pageArea { 
 
    max-width: 1200px; 
 
    margin: 0 auto; 
 
    padding: 0; 
 
} 
 
.rowHalf { 
 
    \t position: relative; 
 
\t padding: 0 1% 0 51%; 
 
} 
 

 
.rowHalf img { 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 1%; 
 
    width: 300px; 
 
    height: 300px; 
 
}

<div class="pageArea"> 
 
    
 
    <div class="rowHalf"> 
 
     <h1>DSC</h1> 
 
    <img src="" alt="failed to load" style="position: absolute;border: 1px solid;left: 1%;width: 300px;height: 300px;bottom: 0;" width="" height=""> 
 
     <p class="introPara">Hello.</p> 
 
     <p>Lorem upsum diosks d amei sfor. More dojrn nbutforge absirns sie, for the siemssmsie a s. During which time the enovleo, will apela, hibt bdeue nf o the dirj, sisnr rufndf. Soerm iejrj ssleoe, orf risms, prod, ddvs sos anmd. Recent doejd aba dor the ssie dimjsiuend duekopmnvuer dmuie doe. Maolske, nfi sikeie. Adie dows. Osleifspd fi tje sos, gjsdijchfu.</p><p>Lorem upsum diosks d amei sfor. More dojrn nbutforge absirns sie, for the siemssmsie a s. During which time the enovleo, will apela, hibt bdeue nf o the dirj, sisnr rufndf. Soerm iejrj ssleoe, orf risms, prod, ddvs sos anmd. Recent doejd aba dor the ssie dimjsiuend duekopmnvuer dmuie doe. Maolske, nfi sikeie. Adie dows. Osleifspd fi tje sos, gjsdijchfu.</p><p>Lorem upsum diosks d amei sfor. More dojrn nbutforge absirns sie, for the siemssmsie a s. During which time the enovleo, will apela, hibt bdeue nf o the dirj, sisnr rufndf. Soerm iejrj ssleoe, orf risms, prod, ddvs sos anmd. Recent doejd aba dor the ssie dimjsiuend duekopmnvuer dmuie doe. Maolske, nfi sikeie. Adie dows. Osleifspd fi tje sos, gjsdijchfu.</p><p>Lorem upsum diosks d amei sfor. More dojrn nbutforge absirns sie, for the siemssmsie a s. During which time the enovleo, will apela, hibt bdeue nf o the dirj, sisnr rufndf. Soerm iejrj ssleoe, orf risms, prod, ddvs sos anmd. Recent doejd aba dor the ssie dimjsiuend duekopmnvuer dmuie doe. Maolske, nfi sikeie. Adie dows. Osleifspd fi tje sos, gjsdijchfu.</p> 
 
     <p>Lorem upsum diosks d amei sfor. More dojrn nbutforge absirns sie, for the siemssmsie a s. During which time the enovleo, will apela, hibt bdeue nf o the dirj, sisnr rufndf. Soerm iejrj ssleoe, orf risms, prod, ddvs sos anmd. Recent doejd aba dor the ssie dimjsiuend duekopmnvuer dmuie doe. Maolske, nfi sikeie. Adie dows. Osleifspd fi tje sos, gjsdijchfu.</p> 
 
    </div> 
 
</div>

柔性解決方案也相當不錯，所以你看：有很多方面，這一切都取決於你需要什麼。