html - 如何在图片旁边放置 ？

Question

在我的 fiddle 中，您会看到文本中断，我想放一个 <hr>在那里并在 CSS 中对其进行装饰，但我不知道该怎么做，因为当我这样做时它会破坏我的内联 block ，我认为那是因为 <hr>是 block 元素。有什么创造性的解决方案吗？我需要将它固定在两段文本之间以保持响应能力。

谢谢!

FIDDLE

HTML:

<section>
    <div class="first">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut rutrum, nisl id ultricies sollicitudin, neque sapien porta nisl, ut gravida elit quam id nisi. <br /><br />Nunc viverra laoreet porttitor. Duis augue justo, pellentesque a luctus eget, luctus a quam. Fusce nec neque nec dolor mattis tempor id vitae nisi.</p>
        <img class="ipad" src="http://img1.lesnumeriques.com/news/26/26963/ipad-4-os.jpg">
    </div>
</section>

CSS:

.first {
    height: 100%;
    line-height: 0;
}

.first p {
    vertical-align: middle;
    display: inline-block;
    width: 49%;
}

.ipad {
    vertical-align: middle;
    display: inline-block;
    width: 49.2%;
}

 p {
    margin: 0;
    padding: 1em 0;
    font-size: 1.8em;
    line-height: 1.5;
}

Answer 1

您可以通过包装 <p> 来实现此目的和 <hr>元素转化为另一个<div>元素，并制作它 display:inline-block .我的解决方案涉及添加此包装器，因此您的结构最终为:

<section>
    <div class="first">
        <div class="text-wrap">
            <p></p>
            <hr />
            <p></p>
        </div>
        <img class="ipad" src="http://img1.lesnumeriques.com/news/26/26963/ipad-4-os.jpg" />
    </div>
</section>

(附加元素是 .text-wrap。请注意，我将这两段分成了单独的 <p> 元素。)CSS 我基本上保留了下来，只是删除了 .first p 的定义。 ，并添加了这两个:

.text-wrap{
    vertical-align: middle;
    display:inline-block;
    width:49%;
}
.text-wrap p {
    vertical-align: middle;
    display: inline-block;
}

这是一个 JSFiddle example这表明了它的成就。如果这不是您要找的，或者您想使用其他方法，请告诉我，我们很乐意进一步提供帮助!