css - 如何在 CSS 中自动设置背景宽度

Question

我想在我的页面标题右侧添加一个 45 度条纹条。

<div class="page-main-title">My Title</div>
<div class="title-bar"> <img /></div>

.page-main-title{
float: left;
font-family: 'Proxima Nova Regular';
font-size: 48px;
color: #767676;
font-weight:bold;
text-transform: uppercase;
margin-bottom:32px;
margin-top: 16px;
margin-right: 12px;
}

.title-bar{
float: left;
height: 32px;
width: 200px;
background: linear-gradient(45deg, white 25%, #dcdbd9 25%, #dcdbd9 50%, white 50%, white 75%, #dcdbd9 75%, #dcdbd9);
background-size: 20px 20px;
margin-top:8px;
}

由于我网站各个页面的标题不包含相同数量的字符，我想在 CSS 中找到一种方法来用栏填充我页面标题右侧的所有空白区域。到目前为止，如果固定宽度(即:200px)，该栏就会显示。但是，如果栏的宽度可以自动调整为标题右侧的剩余空间，无论它包含多少个字符，那就太好了。

Answer 1

请在下面找到不使用 float 属性的替代方法。您创建全宽的“条纹”容器，将标题容器附加到白色背景中。

http://jsfiddle.net/yjhL96ne/

HTML

<div class="title-bar">
    <div class="page-main-title">My Title</div>
</div>
<br/>
<div class="title-bar">
    <div class="page-main-title">This a Title</div>
</div>

<br/>
<div class="title-bar">
    <div class="page-main-title">This a long Title</div>
</div> 

CSS

.page-main-title {
    font-family:'Proxima Nova Regular';
    font-size: 48px;
    color: #767676;
    font-weight:bold;
    text-transform: uppercase;
    margin-right: 12px;
    background-color:#fff;
    display:inline-block;
}
.title-bar {
    background: linear-gradient(45deg, white 25%, #dcdbd9 25%, #dcdbd9 50%, white 50%, white 75%, #dcdbd9 75%, #dcdbd9);
    background-size: 20px 20px;
}

这就是它的样子:

编辑:

请检查以下 fiddle :

http://jsfiddle.net/yjhL96ne/2/

使用绝对位置在标题下以较小的高度显示“条纹”。