Question

感谢您的反馈，并对昨天仓促的帖子感到抱歉。

我有一些divs，每个都包含h3个div，以及需要在它们后面的图像。我在h3和div上使用position:absolute而不是background-image 因为cms正确设置了图像大小，我希望包装器能够自动匹配它。

<div class="give-box">
  <h3>heading</h3>
  <div class="give-now-button"><a href="donate">give now</a></div>
  <img src="donate-image.jpg" />
</div>

CSS看起来像这样：

.give-box h3 {
  position: absolute;
  top: .2em;
  left: .2em;
  font-size: 5em;
  color: #fff;
  text-shadow: 2px 2px 2px #808080;
  text-transform: uppercase;
  line-height: .8em;
  border-bottom: 8px solid #e09e19;
}
.give-now-button {
  position: absolute;
  bottom: 2em;
  right: 2em;
}

短标题看起来很好，但是打破2行的标题会自动填充容器的宽度，所以我得到：

heading
-------

long
heading
-------------

我做了jsfiddle

我有什么想法可以将它缩小到文本的宽度？我已经尝试了我能想到的margin，display:inline，display:inline-block，float等各种组合。

另外，我不能打破这个标题，例如。

<h3>Longer</h3>
<h3>Heading</h3>

因为它是由我的cms动态生成的。

由于

Answer 1

没有绝对定位的

display: inline可以解决问题：http://codepen.io/pageaffairs/pen/jxopH

然而，标题为display: inline并不方便，所以也许把它包装在div中......虽然这是设计决策变得比它们值得更麻烦的地方。

h3标题在突破到2行时会跳到整个容器宽度

1 个答案: