Question

这段布局展示了我想要实现的目标。

http://i.imgur.com/ub9FgP5.png

基本上，我需要做： -----文字-----------------文字再次--------

当然，线条需要自动调整大小，因为每页上的文字宽度不同。我尝试了一些东西，但仍然没有...... 请注意，文本不能有背景，需要透明。

最近的一个就是这个，但是这条线仍然是通过文字，它不可能！

示例：

无标题文档 #content { 宽度：1000px; 身高：100px; 背景：红色; }

    #left_column {
        width: 680px;
        float: left;
        margin-left: 15px;
        background: green;
    }

    #right_column {
        width: 290px;
        float: left;
    }

    .line1 {
        width: 10%;
        height: 3px;
        background: yellow;
        float: left;
        min-width: 20px;
        margin-top: 40px;
    }
    .line2 {
        width: 75%;
        max-width: 71%;
        height: 3px;
        background: yellow;
        float: left;
        min-width: 20px;
        margin-top: 40px;
    }

    h1 {
        float: left;
        font-size: 48px;
        margin: 10px 15px 0px 15px;
    }

body {
        background: blue;
        color: white;
    }
</style> </head> <body>
<div id="content">
    <div id="left_column">
        <div class="line1"></div>
        <h1>Title</h1>
        <div class="line2"></div>
    </div>
    <div id="right_column"> <h1>Title again</h1> <div class="line1"></div>    </div>      </div> </body> </html>

这里我将线宽设置为百分比，但是当文本较长时，线条会落到第二行，我只希望它变小。

我希望你们知道我的意思.. 迎接！

Answer 1

如果它是纯色背景，您可以在<h2>

中添加一个类

<强> HTML

<h2 class="bluecolor"><span>THIS IS A TEST</span></h2>
<p>this is some content</p>

<强> CSS

.bluecolor span {background:blue;}

http://jsfiddle.net/7jGHS/983/

透明文本后面的线

1 个答案: