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

你的标记都是错误的。尝试先纠正它，然后使用百分比宽度应该可以。

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

或者把 div 放在 a 里面，不确定你要走哪条路。

Answer 2

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