Question

我想把图片（现在只是一个占位符）放在它的leftColumn的底部，我该如何实现？

我已经尝试调整<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

简单的方法是给.rowHalfImages一个位置：相对，然后给它里面的图像一个位置：绝对，这将允许你将图像定位在底部，如果你想要的话还可以在其上面放置其他东西。 / p>

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

Answer 2

改变这个类如下：

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

通过更改百分比，您可以根据需要进行设置！

Answer 3

如果你想使用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 {
  	position: relative;
	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>

灵活解决方案也很不错，所以你看：有很多方法，这一切都取决于你需要的。

Answer 4

如果你使用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>

注意：我删除了几个div

如何在元素底部对齐图像？

4 个答案: