Question

我最近遇到了一些问题，迫使此文本与div的底部对齐。以下是发生的事情：

.bottom {
    position: absolute;
    bottom: 0;
}
.pinfo {
    height: 100px;
    font-size: 18px;
    position: relative;
}

正如你所看到的，我用定位来定位div类＆＃34; .bottom＆＃34;把它带到底部。然而，它迫使文本进入图片，这不是我想要的。我知道我可以用左边定位，但是用户发布的图片会随着尺寸的不同而变化，这意味着当使用不同尺寸的图片时定位将会关闭。

然后我尝试通过vertical-align：

来做到这一点

https://jsfiddle.net/d40f37dr/2/

.bottom {
    display: table-cell;
    vertical-align: bottom;
}

但它似乎没有做任何事情。

我希望它看起来像这样：

有人有任何建议吗？

Answer 1

检查您的需要。将position: relative; display: table;用于pinfo类和

.bottom {
    bottom: 0;
    position: absolute;
}

将解决您的问题。

＆＃13;

.xw li {
	position: relative;
	background: #fff;
	border: #b8b8b8;
	box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16), 0 2px 5px 0 rgba(0, 0, 0, 0.26);
	margin: 0 1.618rem 1.618rem 0;
	padding: 0;
	list-style-type: none;
}
.list li {
	width: 100%;
}
.list img {
	height: 100px; /* you can use % */
	width: auto;
	float: left;
}
.pinfo {
	height: 100px;
	font-size: 18px;
    position: relative;
    display: table;
}
.bottom {
    bottom: 0;
    position: absolute;
    vertical-align: bottom;
}

＆＃13;

<section class="main list" id="view">
<ul class="xw">
  <li class="np md"><img src="http://i.imgur.com/nkWpdCK.jpg">
    <div class="pinfo"> Ad nostrud cupidatat sed ut excepteur nisi adipisicing lorem officia proident, laboris qui occaecat nisi voluptate cupidatat nisi velit i.
      <div class="bottom">est</div>
    </div>
  </li>
</ul>

＆＃13;

检查Fiddle here

Answer 2

很简单，你没有指定元素的高度，所以你的.bottom块有文本的高度，文本只在它自己的底部对齐，所以添加一些东西喜欢

height: 50px;

到你的.bottom课程，它会起作用。

Answer 3

请尝试以下操作： Demo

.bottom {
    clear:both; 
    margin-left:100px;
}

HTML：

    <li class="np md"><img src="http://i.imgur.com/nkWpdCK.jpg"/>
    <div class="pinfo"> Ad nostrud cupidatat sed ut excepteur nisi adipisicing lorem officia proident, laboris qui occaecat nisi voluptate cupidatat nisi velit i.         
    </div>
       <div class="bottom">est</div>
  </li>

Answer 4

为您修好：

因为你向左浮动图像并且div的自动宽度为100％，所以它填满整个

=＆gt;因此，绝对文本正确对齐到左下角。

https://jsfiddle.net/d40f37dr/5/

新Css：

.xw li {
    background: #fff;
    position:relative;
    border: #b8b8b8;
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16), 0 2px 5px 0 rgba(0, 0, 0, 0.26);
    margin: 0 1.618rem 1.618rem 0;
    padding: 0;
    list-style-type: none;
}
.list li {
    width: 100%;
    height: 100px;
}
.list img {
    height: 100px; /* you can use % */
    width: auto;
    float: left;
}
.pinfo {
    height: 100px;
    font-size: 18px;
    position: relative;
    float:right;
    width:87%;
}
.bottom {
    position: absolute;
    bottom: 0;
}

Answer 5

试试这个：

.bottom {
    position: absolute;
    bottom: 0;
    left: 100px;
}

Answer 6

只需在课程底部替换此css：

.bottom {
    bottom: 0;
    position: absolute;
    text-align: right;
    width: 100px;
}

Answer 7

将.bottom类改为.bottom：在

之后

.bottom:after {
  position: absolute;
  bottom: 0;
  left: 0;
}

无法将文字对齐到底部

7 个答案: