Question

考虑以下代码：

<div class='wrapper'>
    <div class='right-panel'>Here is the article</div>
    <div class='left-panel'>
        <div class='left-panel-contents'>
            <div class='headline'>
                <h1>HEADLINE</h1>
            </div>
        </div>
    </div>
</div>

.wrapper {
    height: 200px;
    min-width: 960px;
    max-width: 1060px;
    background: gray;
}
.right-panel {
    float: right;
    height: 200px;
    width: 760px;
    background: blue;
}
.left-panel {
    background: green;
    height: 200px;
}
.left-panel-contents {
    position: relative;
    background: pink;
    height: 100%;
    width: 15%;
    // how do I make this fill the width of the left panel
}
.headline {
    background: black;
    color: white;
    line-height: 45px;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
}

h1 {
 float: right;

}

http://jsfiddle.net/duw4G/

我正在尝试将标题文字一直扩展到右侧面板。如果左侧面板内容完全填充其父级，则可以实现。如果我将它设置为100％，溢出：隐藏它不能解决问题（左面板内容填充整个包装div宽度）

有没有办法调整我的技术让它发挥作用？

Answer 1

.wrapper {
    height: 200px;
    min-width: 960px;
    max-width: 1060px;
    background: gray;
}
.right-panel {
    float: right;
    height: 200px;
        width:75%;
   padding:0px;
    margin:0px;
    background: blue;
}
.left-panel {
    background: green;
    height: 200px;
    width:25%;
   padding:0px;
    margin:0px;

}
.left-panel-contents {
    position: relative;
    background: pink;
    height: 100%;
    width: 100%;
    // how do I make this fill the width of the left panel
}
.headline {
    background: black;
    height: 45px;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
float:left; position:relative;
}

Answer 2

.headline将根据具有非静态位置（即相对或绝对）的最近父级定位，或者如果未找到此类父级则定位到视口。

如果其他目的不需要，请从position:relative移除.left-panel-contents，但将其添加到.wrapper。请参阅：http://jsfiddle.net/duw4G/9/

获得非固定宽度div以完美契合父母而不会溢出？

2 个答案: