html - 百分比宽度父级的百分比宽度子级

Question

我有一组(伪代码)元素，如下所示:

<div id="parent">
    <a><div id="child1 class="children"></a>
    ...
    <a><div id="child-n class="children"></a>
</div>

像这样的样式:

.children{background:url(img/child-n.png)}
.parent{background:url(img/parent.png); width: 100%;}

我需要完成的是让父级和子级都根据窗口宽度缩放它们的宽度，同时所有子级保持相对于它们在父级中的位置的位置。

Answer 1

HTML

<div id="parent">
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
</div>

CSS

body {
    background-color: grey;
}
#parent {
    background-color: pink;
    width: 70%;    
    padding: 10px;
}
.child {
    width: 80%;
    padding: 10px;
    background-color: white;    
    margin: 5px;
}

jsFiddle