Question

在我的小提琴中，你会看到文字中断，我想在那里放一个<hr>并在CSS中装饰它，但我不知道如何做到这一点，因为当我这样做时它会打破我的inline-block，我认为这是因为<hr>是一个块元素。这有什么创意解决方案吗？我需要在两段文本之间修复它以保持响应性。

谢谢！

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>元素。）除了我删除了.first p的定义之外，我大部分都留下了CSS，并添加了这两个：

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

这里的JSFiddle example显示了这一点。如果这不是你想要的，或者你想使用不同的方法，请告诉我，我会很乐意进一步提供帮助！

Answer 2

这是Serlite答案的替代品。它基本上使用CSS隐式地放置<hr>。

fiddle

我们在每个段落的顶部添加一个边框，每个容器中的第一个除外。

p {
    ...
    border-top: 1px solid black;
}

p:nth-child(1) {
    border-top: none;
}

如何在图像旁边放置<hr />？

2 个答案:

fiddle