Question

我的问题最好用这个原理图/图像概述，概述了我希望它看起来如何：

http://i51.tinypic.com/28thuh0.jpg http://i51.tinypic.com/28thuh0.jpg！

我有一个背景图片，顶部有两个div文本（标题和简介）。我在标题的两侧也有2个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 - 忽略为左条纹和右条纹指定的宽度 - 它们只是占位符：

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

想法？如果我能提供更多细节，请告诉我。

Answer 1

我有点忙于实际测试，但这可能会给你一些方向。我不确定你想要达到的确切效果（见关于找到某人制作的现场演示的评论）。

无论如何，这种流畅的布局有点难以用直接CSS实现。为了方便起见，我建议将右条纹设为静态宽度。

这个CSS解决方案可以工作......没有承诺。

标记

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

CSS

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

使用javascript会让它变得非常简单......这就是我如何用jQuery做到的。同样，我会使右条纹成为静态宽度以实现此效果。

（相同标记......）

...

JS

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

Answer 2

更新仅限CSS解决方案：http://jsfiddle.net/SebastianPataneMasuelli/XnvYw/1/

它在#masthead和#headline-container上使用相同的背景图像两次。除吨标题容器外，背景偏移以匹配其相对于其父元素的左侧位置。然后我们只需要一个div.line，它会被标题和副本下的背景图像覆盖，给人一种无缝图像的幻觉。

~~你的意思是这样吗？：http://jsfiddle.net/SebastianPataneMasuelli/XnvYw/~~

Answer 3

您可以使用jQuery动态执行此操作。你取3 div的全宽，放下内部div的大小，并动态分配2个外部div的宽度，其中栏应该水平重复。

基本上，您需要：外部div的总宽度为$("#whole-div").width() - $("#inner-div").width()。然后，根据您对inner-div的定位，为外部div分配值。例如：整个div有1000px，内部div有200px，内部div有600px左边。然后，您将为左侧div（$("#whole-div").width() - $("#inner-div").css('left')）分配600px，为右侧div（$("#whole-div").width() - $("#inner-div").css('left') - $("#inner-div").width()）分配200px。当然，您将在外部div上设置background-repeat属性，以便重复图像。

希望有所帮助！

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

3 个答案:

标记

CSS

（相同标记......）

JS