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

我的问题最好用这张示意图/图像来概述,它概述了我希望它的外观：

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

我有一个背景图片和2个div,上方是文字(标题和简介文字).我在标题的两侧各有2个div-这些是用于白色水平条纹的.

我的问题是,标题在CMS中是可变的,并且我希望水平的白色条纹能够自动填充其左侧和右侧的空间,而不管标题的宽度如何.

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

这是我的HTML：

@H_403_16@<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-忽略为左条纹和右条纹指定的宽度-它们只是占位符：

@H_403_16@#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解决方案可能会起作用……没有希望.

标记

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

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

使用javascript会使其变得非常容易…这是我将如何使用jQuery做到这一点.再次,我将使右条纹为静态宽度以实现此效果.

(相同的标记…)

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

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

猜你在找的CSS相关文章