css - 父元素在CSS中采用子尺寸

Question

我想让父元素采用它的子元素大小。问题是我需要以百分比来定义子元素的宽度(以便响应)。

例如，我不能将父元素设置为 50%，因为只有子元素具有我需要的类， block 大小因此类而异。我使用的是同位素，因此部分代码无法更改。

示例代码:

<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....

谢谢!

Answer 1

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