Question

我想让父元素取其子大小。问题是我需要以百分比定义子元素的宽度（以使其响应）。

例如，我不能将父元素设置为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 ....

谢谢！

Answer 1

使用CSS无法按照您希望的方式完成 - 百分比宽度是其父容器的百分比。让我们说父母是1000px宽。 size1为250px（25％）。如果此时您将父级更改为250px，则size1将变为62.5px（250px的25％）。希望这是有道理的。

Answer 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％，而不管它嵌套在哪里。

父元素在css中使用子大小

2 个答案: