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

时间:2013-10-11 18:13:01

标签: html css responsive-design

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

<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%;}

我需要做的是让父母和孩子的宽度相对于窗口宽度进行缩放,所有孩子都保持相对于父母位置的位置。

2 个答案:

答案 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;
}

jsFiddle