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图像。浮动图像会将其从正常的内容流中取出，这意味着它不会像通常那样占用空间，但文本和其他内联元素将会注意到＆＃34;注意＆＃34;它并环绕它。

.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