父元素在css中采用子大小答案

【问题标题】：Parent element take child size in css父元素在css中采用子大小
【发布时间】：2014-03-14 01:43:05
【问题描述】：

我想让一个父元素采用它的子大小。问题是我需要以百分比定义子元素的宽度（使其具有响应性）。

例如，我不能将父元素设置为 50%，因为只有子元素具有我需要的类，并且块大小因此类而异。我正在使用同位素，因此其中一些代码无法更改。

这是一个示例代码：

<div class="parent">
   <div class="child size1">content</div>
</div>

<div class="parent">
   <div class="child size2">content</div>
</div>

CSS：

.parent{
float: left;
margin: 0px 5px 10px 5px;
position: absolute;
left: 0px;
top: 0px;
-webkit-transform: translate3d(0px, 796px, 0px);
z-index: 20;
}

.size1{
width: 25%; /*I need the parent to take this size also -> 25% of the page */
}

.size2{
width: 50%; /*I need the parent to take this size also -> 50% of the page */
}

有人有 CSS 解决方案吗？如果我想不通，我会使用 jquery，但如果有其他解决方案，我不希望我的网站获得不必要的 js....

谢谢！

【问题讨论】：

你可以使用伪类吗？ f.e.: parent:nth-child(n)
我不这么认为，因为所需的大小是可变的（不是总是 size1 然后 size2 然后再 size1 等），我对 nth-child 的理解是，例如我可以设置每 4 个元素要有一定的宽度？也许我不明白它是如何工作的。

标签： css width parent-child percentage

【解决方案1】：

这不能以您希望的方式使用 CSS 完成 - 百分比宽度是其父容器的百分比。假设父级是 1000px 宽。 size1 将是 250 像素 (25%)。如果此时您将父级更改为 250px，size1 将变为 62.5px（250px 的 25%）。希望这是有道理的。

【讨论】：

如果以百分比定义，唯一的父母和它的孩子宽度相同的方法是，如果孩子被设置为 100% 宽度，即使这样它也是父母宽度的 100%，而不是 100%页面。
好的，谢谢您的回复。我希望有一种我不知道的方法。那我就用jquery吧。谢谢你的回答！

【解决方案2】：

您可以使用vw 和vh 单位。这些基本上分别对应于页面宽度和高度的百分比。

例如，在您的代码中

.size1{
width: 25%; /*I need the parent to take this size also -> 25% of the page */
}

将width: 25%; 更改为width: 25vw;

这使得.size1 类中的每个元素占页面宽度的25%，而不管它嵌套在哪个元素中。

【讨论】：