我有一组(伪代码)元素,如下所示:
<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%;}
我需要做的是让父母和孩子的宽度相对于窗口宽度进行缩放,所有孩子都保持相对于父母位置的位置。
答案 0 :(得分:1)
你的标记都错了。首先尝试更正,并使用百分比宽度。
<div id="parent">
<div id="child1" class="children"><a></a></div>
<div id="child-n" class="children"><a></a></div>
</div>
或者将div放在a的内部,不知道你想要的方式。
答案 1 :(得分: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;
}