百分比宽度父项的百分比宽度子项

Percentage-width children of a percentage width-parent

提问人：Thomas Murphy 提问时间：10/12/2013 更新时间：10/12/2013 访问量：3543

问：

我有一组（伪代码）元素，如下所示：

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

我需要完成的是让父项和子项相对于窗口宽度缩放其宽度，所有子项都保持其相对于其在父项中的位置的位置。

HTML CSS 响应式设计

评论

2赞 Dvir 10/12/2013
还行。因此，与Precentage合作是个好主意。问题是什么？
0赞 Thomas Murphy 10/12/2013
下面是一个更简单的提问方式：如何使子元素以与父元素相同的比例缩放？即（父母是原始大小的 70%，子大小也应缩放到该大小的 70%）
1赞 Dvir 10/12/2013
只需用 设置它们的尺寸即可。当窗口调整大小时，它会自动调整，因为子 div 始终相对于其父级。点击这里查看我的例子。%70%

答：

1赞 jbarnett 10/12/2013 #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赞 Thomas Murphy 10/12/2013
这是我注意到的伪代码，但我仍然应该关闭这些括号，对此感到抱歉。
0赞 jbarnett 10/12/2013
没问题:)宽度是根据其父级的宽度计算的。因此，如果您将 100% 的宽度分配给父项，将 70% 的宽度分配给子项，则子项将始终是父项宽度的 70%。你有小提琴或其他东西吗？
0赞 Thomas Murphy 10/12/2013
Dvir 的小提琴是我一直在寻找的解决方案。它可能不是我所处的特定泡菜的答案，但它是我提出的特定问题的解决方案。到处都是感激之情。
1赞 Dvir 10/12/2013 #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

上一个：找不到 MavenWrapperMain 类，但包含在目录中的 .m2 中

下一个：pandas - 识别最接近 null/sentinel 值的行