Question

我有一个div，里面有一些内容，一个项目列表。

我希望图像与底部对齐，以便用户可以选择它。出于某种原因，我无法将图像对齐到底部，我尝试了伪元素和span元素，似乎没有任何效果。

这是我到目前为止所做的：

的CSS：

div.greybox{
    border:solid 8pt;
    border-color:rgb(169,172,176);
    display:inline-block;
    border-radius:10px;
    width:290px;
    height:306px;
    padding:10px;
    vertical-align:top;
}

div.greybox:before {
    content: ' ';
    display: inline-block;
    vertical-align: bottom; /* vertical alignment of the inline element */
    height: 100%;
}

div.greybox span{

    display: inline-block;

    vertical-align: bottom;

}

/*this is just for the image, I dont care much about this*/
img{
  width:247px; height:76px;
}

HTML：

<div class="greybox col-md-offset-0">
    <ul>
        <li>
            an absence of medium or high risk criteria
        </li>
    </ul>
    <span><img  src="http://www.nacacnet.org/studentinfo/PublishingImages/fish.jpg" /></span>
</div>

https://jsfiddle.net/b5ps3xcc/

以下是我希望它的外观：

Answer 1

据我所知，vertical-align只能用于控制内嵌元素在其所在文本行中的位置（除非与表一起使用，但这是一个不同的故事）。 / p>

但是不要害怕，flexbox要救援！

将此应用于div：

display: flex;
flex-direction: column;

这是ul：

flex: 1;

display: flex;会将div变成一个弹性框，将其内容均匀分布在可用空间内。
flex-direction: column;将以垂直方式执行此操作。

flex: 1;

ul会使该元素变得合适。

以下是使用供应商前缀实现到您的小提琴中的那些属性。

div.greybox{
    border:solid 8pt;
    border-color:rgb(169,172,176);
    border-radius:10px;
    width:290px;
    height:306px;
    padding:10px;
  
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

div.greybox ul{
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

/*this is just for the image, I dont care much about this*/
img{
  width:247px; height:76px;
}

<div class="greybox col-md-offset-0">
    <ul>
        <li>
            an absence of medium or high risk criteria
        </li>
    </ul>
    <span><img  src="http://www.nacacnet.org/studentinfo/PublishingImages/fish.jpg" /></span>
</div>

请注意，这是一个HTML5功能，因此旧版浏览器很可能不支持它，特别是IE支持很差。有关详细的兼容性信息，请参阅caniuse.com。

作为古代浏览器支持的最后手段（为了完整的答案），你可以使用表来实现你想要的，通过提供表本身和单元格最后一行显式高度，并隐含计算上排单元格的高度但那是evil and wrong，所以除非必须，否则不要这样做。

Answer 2

使用包含图片的范围的绝对定位：

div.greybox {
  border: solid 8pt;
  border-color: rgb(169, 172, 176);
  display: inline-block;
  border-radius: 10px;
  width: 290px;
  height: 306px;
  padding: 10px;
  vertical-align: top;
  position: relative;
}

div.greybox span {
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
}

/*this is just for the image, I dont care much about this*/
img {
  width: 247px;
  height: 76px;
}

<div class="greybox col-md-offset-0">
  <ul>
    <li>
      an absence of medium or high risk criteria
    </li>
  </ul>
  <span><img  src="http://www.nacacnet.org/studentinfo/PublishingImages/fish.jpg" /></span>
</div>

Answer 3

对于旧版浏览器，您可以使用表格布局属性：例如：https://jsfiddle.net/b5ps3xcc/2/

＆＃13;

div.greybox {
  border: solid 8pt;
  border-color: rgb(169, 172, 176);
  display: table;
  border-radius: 10px;
  width: 290px;
  height: 306px;
  padding: 10px;
}
div.greybox ul {
  display: table-row;
  height: 100%;
  /* will take as much space that is avalaible pushing other content down; */
}
/*this is just for the image, I dont care much about this*/

img {
  width: 247px;
  height: 76px;
}
li + li {
  color: #CA3100;
}

＆＃13;

<div class="greybox col-md-offset-0">
  <ul>
    <li>
      an absence of medium or high risk criteria
    </li>
    <li><b>See it as an alternative to flex, but greybox will grow taller if content goes tallervthan initial height...</b>
    </li>
  </ul>
  <span><img  src="http://www.nacacnet.org/studentinfo/PublishingImages/fish.jpg" /></span>
</div>

＆＃13;

Answer 4

这个exp。代码对我很有用。

<style>
.listing_container{width:300px; height:300px;font: 0/0 a;}
.listing_container:before { content: ' ';display: inline-block;vertical-align: bottom;height: 100%;}
.listing_container img{ display: inline-block; vertical-align: bottom;font: 16px/1 Arial sans-serif; max-height:100%; max-width:100%;}
<style>

<div class="listing_container">
    <img src="http://www.advancewebsites.com/img/theme1/logo.png">  
 </div>

将图像垂直对齐到包含列表的div的底部

4 个答案: