Question

我正在尝试使用图像对此文本块进行编码，但由于某种原因，它对我不起作用。使用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
}

Answer 1

查看this fiddle

CSS：

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

只要文本和图像位于父容器中，只需向左浮动图像以使文本环绕它。要将它与文本分开，请给它一个余量，瞧！

Answer 2

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

更改了.heading的CSS：

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

Fiddle here

文本块内的图像

2 个答案: