Question

我有一个子元素是图像。它漂浮在父母的另一个div旁边。我希望图片的宽度是父母父母的百分比。但是，它的父级没有设置宽度可以解决（因为另一个子div中的文本可能会有所不同）。有没有办法仍然使用％来设置图像相对于祖父母的宽度？

<div class="grandparent">
    <div class="parent">
        <!-- I want this to be 30% the width of grandparent -->
        <img class="myImage" src="someimage.jpg" />

        <div class="text">Some text here</div>
    </div>
</div>

家长只会使用overflow: hidden;，祖父母的宽度为width: 100%;，而且这两个孩子都是float: left;。

编辑：父div必须缩小为子div，因此它不会运行兄弟div。这就是为什么它没有宽度但使用overflow: hidden。

Answer 1

如果将父div设置为100％，则应采用祖父母的宽度。这样您就可以在图片上正确使用30％。

.grandparent {
  width: 400px;
}

.parent {
  width: 100%;
}

.myImage {
  width: 30%;
}

Fiddle

如何使用CSS将子图像使用百分比与父母的父母一起使用？

1 个答案: