我的问题最好用这张示意图/图像来概述,它概述了我希望它的外观：
http://i51.tinypic.com/28thuh0.jpg http://i51.tinypic.com/28thuh0.jpg！
我有一个背景图片和2个div,上方是文字(标题和简介文字).我在标题的两侧各有2个div-这些是用于白色水平条纹的.
我的问题是,标题在CMS中是可变的,并且我希望水平的白色条纹能够自动填充其左侧和右侧的空间,而不管标题的宽度如何.
我不知道如何使这两个水平的白色条纹自动调整大小.
这是我的HTML：
<div id="masthead">
<div id="headline-container">
<div id="left-stripe"> </div><div id="headline">{headline}</div><div id="right-stripe"> </div>
</div>
<div class="clear-both"> </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;
}
有想法吗？如果可以提供更多详细信息,请告诉我.
最佳答案
我有点忙,无法进行实际测试,但这可能会给您一些指导.我不确定您要达到的确切效果(请参阅有关找到某人制作的现场演示的评论).
无论如何,使用直线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);