Question

如何让<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;
}

Answer 1

试试下面的代码段。

据我了解你的问题，诀窍是得到一半（浏览器宽度 - 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 -->

迫使div向左

1 个答案: