1

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

谢谢！

小提琴

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;
}
4

2 回答 2

3

你可以通过将你的<p>and<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 示例，它显示了它所取得的成果。如果这不是您想要的，或者您想使用不同的方法，请告诉我，我很乐意为您提供进一步的帮助！

于 2013-08-05T02:40:34.593 回答
2

这是 Serlite 答案的替代方案。它基本上是<hr>使用 CSS 隐式插入的。

小提琴

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

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

p:nth-child(1) {
    border-top: none;
}
于 2013-08-05T02:44:22.920 回答