CSS:3个div-根据内部div/text的宽度自动调整2个外部div的大小

我的问题最好用这个示意图/图像来概括，它概括了我希望它的外观：

!

我有一个背景图片，上面有两个div作为文本（标题和介绍文本）。我在标题的两边都有两个div，它们是白色水平条纹

我的问题是，CMS中的标题是可变的，我希望水平白色条纹自动填充左右两侧的空间，而不管标题的宽度如何

我不知道如何使这两条水平白色条纹自动调整大小

这是我的HTML：

<div id="masthead">
<div id="headline-container">   
    <div id="left-stripe">&nbsp;</div><div id="headline">{headline}</div><div id="right-stripe">&nbsp;</div>
</div>
<div class="clear-both">&nbsp;</div>
<div id="intro-text">{intro_text}</div>
</div>

---

想法？请告诉我是否可以提供更多详细信息。

更新仅CSS流体解决方案：

它在

#报头

和

#标题容器

上使用相同的背景图像两次。除标题容器外，背景偏移以匹配其相对于其父元素的左侧位置。然后我们只需要一个

div.line

，它被标题和副本下的背景图像覆盖，给人一种无缝图像的错觉

---

您的意思是这样吗？：

您可以动态地执行此操作，例如使用jQuery。取3个div的全宽，删除内部div的大小，并动态指定2个外部div的宽度，其中条应水平重复

基本上，您需要：

$（“整个div”）.width（）-$（“内部div”）.width（）

用于外部div的总宽度。然后，根据内部div的位置，为外部div指定值。 例如：整个div有1000px，内部div有200px，内部div位于左侧600px。然后将600px分配给左div（

$（“#整div”）.width（）-$（“#内div”）.css（'left'）

），将200px分配给右div（

$（“#整div”）.width（）-$（“#内div”）.css（'left'）-$（“#内div”）.width（））.css（'left'）-$（“内div”）.width（）

）。当然，您将在外部div上设置

background repeat

属性，以便图像重复

---

希望有帮助

我有点太忙，无法实际测试，但这可能会给您一些指导。我不确定你想要达到什么样的效果（请参阅关于找到某人制作的现场演示的评论）

无论如何，这种流畅的布局是有点难以实现可靠的直接CSS。为了更简单，我建议将正确的条纹设置为静态宽度

这个CSS解决方案可能有效。。。没有承诺

加成 但是使用javascript会让它变得非常简单。。。下面是我将如何使用它。同样，我会将正确的条纹设置为静态宽度以实现此效果

（相同的标记…）

js

---

你的问题有点含糊。对于这样的东西，最好能找到一个

live

示例，而不仅仅是一个屏幕——也许是对我的实际问题的改写：我如何让2条白色条纹填满标题div左右的任何剩余空间，而不管标题文本的宽度（会改变）。（改变实际问题）=我相信他正在寻找一种“流畅”的方法。事实上，“流畅”是关键。@Sebastian，这并不能完全满足我的需要。如果你把标题改长或改短，你就有问题了。请看此更新：当然，如果oyu的标题超出父容器的边缘，并且它全部使用一个单词，并且它延伸了行，它看起来会很奇怪，但是如果你只是在标题中加一个空格，它就会折叠起来工作。对了，我的错，我应该提到，我不想让它转到另一行，它应该伸展开来。我认为最好/最简单的方法是使用jQuery。只尝试了一次CSS，没有尝试。我就是这样开始的。毕竟，我决定使用jQuery方法。我认为这是最简单的，让我可以继续前进，阿门！赞成。。。有时候css无法完成任务。虽然，有了CSS 3/html5，我认为如果你想把时间花在。。。但这将是x-land的一片荒地

#masthead {
    height: 260px;
}

div#headline-container {
    width:960px;
    padding:none;
}
div#left-stripe{
    float: left;
    background-color:#fff;
    height: 3px;
    width:500px;
    display: inline;
}
div#right-stripe{
    float: right;
    background-color:#fff;
    height: 3px;
    width:100px;
    display: inline;
}
div#headline {
    text-align:right;
    color: #fff;
    font-size: 200%;
    float: left;
    display: inline;    
}
div#intro-text {
    text-align: left;
    float: right;
    width: 300px;
    color: #fff;
}

<div class="container">
  <div class="headline-container">
   <div class="left-stripe"></div>
   <div class="headline">Headline goes here</div>
   <div class="right-stripe></div>
  </div>
  <div class="content"></div>
</div>

//static width for right stripe
.right-stripe { width: 20px; }
.headline { width: auto; }
.left-stripe { width: auto; }

var totalWidth = $("#container").width();
var leftWidth = totalWidth - ($("headline").width() + $("right-stripe").width());
$("left-stripe").width(leftWidth);