将文本划分为<hr />行

Question

如何使用<hr>执行此操作？包含内容的Div将超过<hr>。怎么做？

这是我的jsfiddle：http://jsfiddle.net/fnaYs/。我不知道如何将此文本放入图像框中。任何解决方案？

之后，我想将此布局添加到wordpress中，因此我希望将文本放在<div>或其他元素中，而不是放在css文件中。

Answer 1

当您将变量的position属性设置为relative时，它基本上意味着元素的位置相对于浏览器。

所以当你说top:-5px;时，这意味着你要求浏览器将你的元素放在实际应该位置的5个像素上方。

您需要做的就是将CSS的top属性设置为某个负值。像这样：

<hr />
<div style="position:relative;top:-5px;">DIV CONTENT</div>

将-5px替换为您的要求......

Answer 2

我编写了一个解决方案（可能还有其他方法）。

这是一个有效的JSFiddle：http://jsfiddle.net/fnaYs/6/

<强> CSS

hr.line {
    padding: 0;
    border: 1px solid;
    color: #333;
    text-align: center;
}

.box {
    background-color:teal;
    width:100px;
    height:30px;
    position:absolute;
    left: 40%;
    bottom:90%;
    padding-top:20px;

}

<强> HTML

<hr class="line"/>
<div class="box"> Text </div>

Answer 3

这是一个有效的jsFiddle，你需要的东西： http://jsfiddle.net/2LaLb/

<hr class="line" /> <div class="mydiv">Div with text</div>

和相应的CSS将是：

    hr.line {
    padding: 0;
    border: 1px solid;
    color: #333;
    text-align: center;
}

    .mydiv {
background:red;
    border:1px solid red;
    width:100px;
    position:absolute;
    top:0;left:400px;
}

正如您所看到的，它会产生您想要的结果。