文本块内的图像答案

【问题标题】：Image inside text block文本块内的图像
【发布时间】：2013-11-14 10:03:47
【问题描述】：

我正在尝试编写带有图像的文本块，但由于某种原因，它对我不起作用。使用 CSS 实现这一点的最佳方法是什么？谢谢大家！

更新

这就是我遇到的问题是下划线标题 http://jsfiddle.net/C2kqR/

.block h3{
    margin-bottom: 0.6em;
    margin-top: 0;
    color: #c80006;
    font-weight: 400;
    font-style: normal;
    font-size: 22px;
    line-height: 1.2em;
    font-family: 'Signika', sans-serif;
    text-rendering: optimizeLegibility;

}

.heading {
    margin-bottom: 20px;
    color: #c80006
}

.aleft {
    float:left; 
    margin:0 2em 0 0 !important;
}

.hr-line-full {
    width: 100%;
    margin: 22px 0 35px;
    display: block;
    border-top: 1px solid #dedede
}

【问题讨论】：

能否分享一下jsfiddle当前的代码给我们看看。
How to wrap text around an image using HTML/CSS的可能重复
这是我目前得到的jsfiddle.net/C2kqR

标签： css alignment block

【解决方案1】：

看看this fiddle

CSS：

img{
    float:left;
    margin:0 10px 10px 0;
}

只要文本和图像位于父容器中，只需将图像向左浮动即可让文本环绕它。要将其与文本分开，请给它一个边距，瞧！

【讨论】：

谢谢，但我的问题是我带下划线的标题超出了图像。可以解决吗？

【解决方案2】：

我为您提供了一个解决方案，您可以删除您尝试模仿的 hr 元素，而使用 border 代替 h3。

更改了.heading 的 CSS：

.heading {
    margin-bottom: 34px;
    padding-bottom: 24px;
    color: #c80006;
    border-bottom: 1px solid #dedede;
    overflow: hidden;
}

Fiddle here

【讨论】：

@user1628193 乐于助人:)