父元素在css中取子大小 [英] Parent element take child size in css

问题描述

我想有一个父元素，它的子大小。问题是，我需要以百分比来定义子元素的宽度（为了响应）。

I'ld like to have a parent element take it's child size. The problem is that I need the child element's width to be defined in percent (for it to be responsive).

我不能将父元素设置为50％例如，因为只有孩子有我需要的类，块大小随这个类而变化。

I can't set the parent element to be 50% for example, because only the child has the class I need and the block size varies by this class. I am using isotope so some of this code can't be changed.

这里是一个示例代码：

<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，如果有另一个解决方案....

Anyone has a CSS solution ? If I can't figure it out, I'll use jquery but I don't want my website to get unnecessary js if there's an other solution....

谢谢！

推荐答案

这不能用CSS你希望的方式 - 百分比宽度是他们的父容器的百分比。我们假设父节点宽度为1000px。 size1 将为250像素（25％）。如果此时你将父级更改为250px， size1 将变为62.5px（250px的25％）。希望这是有道理的。

This can't be done with CSS the way you are hoping - percentage widths are percentages of their parent's container. let's say the parent is 1000px wide. size1 would be 250px (25%). If at this point you change the parent to be 250px, size1 will become 62.5px (25% of 250px). hopefully that makes sense.

这篇关于父元素在css中取子大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！