CSS: 使图像流出父容器

Question

这是我想要实现的外观：

我正在使用 SkeletonJS 16 列网格框架。这是相关代码：

<div class="container section" id="features">
  <div class="one-third column">
    <h5 class="underline">Waterproof</h5>
    <div class="textbox">
      <p>Lorem ipsum</p>
    </div>
  </div>
</div>

.section h5 {
  font-size: 1.2rem;
  text-transform: uppercase;
}

.section h5.underline {
  color: #437356;
  background: #f4f0e4;
  margin: 12px 0 12px 0;
  border-radius: 2px;
  padding: 8px 12px;
  font-weight: 700;
}

我的最终目标是将 h5 下划线转换成这样：

<h5 class="underline">Waterproof<img class="image" src=""/></h5>

因此找到一套优雅的 CSS 规则，使图像看起来像附加设计。我仍然是 CSS 的学徒，所以如果每个人都有解决方案，请给我一两瓶药水。谢谢！

Answer 1

您可以float 图片。浮动图像会使它脱离正常的内容流，这意味着它不会像通常那样占用 space，但文本和其他内联元素会 "notice" 它并环绕它。

.underline > img {
    float: right;
    position: relative;
    top: -20px;
}

jsFiddle: http://jsfiddle.net/kgpLomct/

或者您可以使用 absolute positioning。绝对定位的项目完全从文档流中移除，文本和其他元素将表现得就像它不存在一样，并将根据最近定位的祖先元素定位自己。

.section h5.underline {
    /* ... */
    /* make sure this is set! */
    position: relative;
}
.underline > img {
    position: absolute;
    top: -10px;
    right: 10px;
}

jsFiddle: http://jsfiddle.net/kgpLomct/1

CSS: 使图像流出父容器

CSS: Make an image to bleed outside parent container

html

css

image

overflow