Question

在以下html / css代码中：

<div class="blue">
    <div class="red">
        <div class="yellow">
            1
        </div>
        <div class="yellow">
            2
        </div>
    </div>
</div>

.blue   { background-color: blue;   height: 150px; width: 100px; margin: 100px; }
.red    { background-color: red;    height: 100px; width: 500px; margin-left: -50px; }
.yellow { background-color: yellow; height: 50px;  }

我需要为.yellow提供与.blue相同的宽度，但不使用固定的px（因为.blue具有响应性且可以更改其宽度）并且不使用position: absolute;因为两个黄色不能重叠。

预期结果：http://jsfiddle.net/kPg97/3/

这不起作用，因为它使用固定的px：

.yellow { width: 100px; float: left; }

这不起作用，因为第一个.yellow不可见：

.yellow { position: absolute; width: 100%; left: 0px; }

Answer 1

可能使用jquery，你可以这样做：

$(document).ready(function(){
    var width = $(".blue").width();
    $(".yellow").width(width);
});

你可以不用jquery，你可能已经明白了。

请注意使用了display:inline;和float:left。希望他们不会与您的利益发生冲突。 Jsfiddle here

没有绝对位置的祖父母的100％宽度

1 个答案: