如何自动化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

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

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

这就是它会怎样看：

编辑：

请检查以下小提琴：

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

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