Question

免责声明：我看过类似的帖子，但不是很像我的帖子，因此我现在发帖的原因。

目前我有以下内容：

<div class="textwidget">
<p style="width: 69%;">
Yo, I'll tell you what I want, what I really really want, 
So tell me what you want, what you really really want, 
I'll tell you what I want, what I really really want, 
So tell me what you want, what you really really want, 
I wanna, I wanna, I wanna, I wanna, I wanna really really really wanna zigazig ha. 
If you want my future forget my past, 
If you wanna get with me better make it fast, 
Now don't go wasting my precious time, 
Get your act together we could be just fine 
I'll tell you what I want, what I really really want, 
So tell me what you want, what you really really want, 
I wanna, I wanna, I wanna, I wanna, I wanna really really really wanna zigazig ha. 
</p>
<a class="button overlay-btn" href="http://www.google.com" >A link</a></div>

使用以下CSS：

.button, button, input[type="submit"] {
  background-color: #ff6600;
  font-family: "futura-pt";
  font-size: 30px;
  margin: 0;
  text-transform: lowercase;
}
.overlay-btn {
  position: absolute;
  width: 30%;
  right: 0;
  top: 0;
}

我基本上希望/需要按钮高度一直向下延伸到与文本最后一行相同的底部。

有没有合理的方法来实现这一目标？一如既往越简单越好。我非常感谢你的帮助，因为作为一名CSS初学者，我一整天都在努力，但没有成功。

Answer 1

此处display: table解决方案 - JSFiddle

.button, button, input[type="submit"] {
  background-color: #ff6600;
  font-family: "futura-pt";
  font-size: 30px;
  margin: 0;
  text-transform: lowercase;
}
.textwidget {
  display: table;
}
.textwidget p {
  display: table-cell;
  width: 70%;
}
.overlay-btn {
  display: table-cell;
  width: 30%;
}

并且您在HTML中不需要这个style="width: 69%;"。您也可以将vertical-align: middle与display: table-cell一起使用，因此请尝试将其与text-align: center结合使用。

UPD： http://jsfiddle.net/4wbkL9ow/1/ - 我觉得它看起来很不错。

使锚点（按钮）与其旁边的文本的高度相同

1 个答案: