0

我怎样才能<div id="green_bar">重叠<div id="top_header">并停在徽标的左边缘？当屏幕宽度扩大时，我试图让绿色条向左扩大，但我希望它停在徽标的左边缘。

我试过position: absolute;了，#green_bar但它在屏幕上扩展了 100%。

JSFiddle：http: //jsfiddle.net/hfgQt/14/

HTML：

<div id="header_bar"></div><!-- Grey line on top -->
        <div id="top_header"><!-- begin top header -->
        <div id="green_bar"></div>
        <div class="wrap">
            <div id="logo">
                <a><h1>info</h1></a>
            </div>
        </div>
        </div><!-- end top header -->​

CSS

.wrap {
    margin:0px auto;
    width:960px;
}

#header_bar {
    background-color: #424243;
    height: 25px;
}

#top_header {
    padding:0px 0px;
    background-color:#24303d;
    background-image:url("http://i.imgur.com/kGjGG.png");
    border-bottom:1px solid rgba(0,0,0,.4);
    overflow:hidden;
}


#green_bar {
    display: block;
    height: 10px;
    width: 100%;
    background-color: green;
}

#logo {
    float:left;
    clear:both;
}

#logo h1 {
    margin:0px; 
    padding:0px;
    background:url(../images/logo.png) no-repeat;
    text-indent:-9999px;
    width:258px;
    height:56px;
}
​
4

1 回答 1

2

试试下面的片段。

据我了解您的问题，诀窍是获得（浏览器宽度 - 960px）的一半。这就是左边距的数量。我使用了一个额外的包装器 div 来剪裁固定宽度（应该是 960px，但我将其更改为 480px 以使其在 jsfiddle 中看起来不错）。这是position: absolute为了让它脱离流动。然后内部 div ( #green_bar) 只需width: 50%将其缩减为两个边距加在一起的一半宽度 - 仅左边距的宽度。

很难理解你想要什么，所以我可能做错了。如果您需要更多帮助，请告诉我。

header {
    padding-bottom:5px;
    margin-bottom:35px;
    background:#ffdf85;
    border-bottom:1px solid #d4d4d4;
    background-color:#ffdf85;
}

.wrap {
    margin:0px auto;
    width:480px;
    background: rgba(128, 128, 0, .5);
    overflow: hidden;
}

#header_bar {
    background-color: #424243;
    height: 25px;
}

#top_header {
    padding:0px 0px;
    background-color:#24303d;
    background-image:url("http://i.imgur.com/kGjGG.png") no-repeat;
    border-bottom:1px solid rgba(0,0,0,.4);
    overflow:hidden;
    position: relative;
}


#green_bar_wrapper {
    position: absolute;
    padding-right: 480px;
    left: 0;
    right: 0;
    top: 0;
}
#green_bar {
    width: 50%;
    height: 10px;
    background-color: green;
}

/*    3.0.0 Logo
----------------------------------------*/

#logo {
    float:left;
    clear:both;
}

#logo h1 {
    margin:0px; 
    padding:0px;
    background:url(http://i.imgur.com/kGjGG.png) no-repeat;
    width:258px;
    height:56px;
}

#logo h1 span {
    text-indent: -9999px;
}
<header><!-- BEGIN HEADER -->
<div id="header_bar"></div><!-- Grey line on top -->
        <div id="top_header"><!-- begin top header -->
        <div id="green_bar_wrapper"><div id="green_bar"></div></div>
        <div class="wrap">
            <div id="logo">
                <h1><a><span>info</span></a></h1>
            </div>
        </div>
</div><!-- end top header -->
</header><!-- END HEADER -->

于 2012-11-09T02:22:58.520 回答