Question

如何设置元素的宽度相对于父父元素的宽度？

我使用滑块插件，要求直接父容器更大，以包含所有具有overflow：hidden set的div。我需要将元素设置为相对于父父容器的宽度具有100％的宽度。

我该怎么做呢？任何帮助表示赞赏

Answer 1

滑块插件很可能已经在做.parent（）所以你只需要将另一个.parent（）附加到它上面：.parent（）。parent（）

Answer 2

父母的父母＆＃34;设定了尺寸（我想你已经做过了）。
＆＃34;父母＆＃34;扩展需要white-space:nowrap，以便横跨水平的东西不包裹到下一行。此外，它必须不拥有width，以便幻灯片＆＃39; width与父母＆＃34;的父母相关。
＆＃34;幻灯片＆＃34;需要display:inline-block才允许他们并排坐着，因为div通常会在之前和之后都清楚。

你可以like this。父母有一个厚厚的黑色边框。孩子们和父母的父母一样宽。但他们设法＆＃34;溢出＆＃34;横向，礼貌的父母＆＃34;。这里的诀窍是没有设置＆＃34; parent＆＃34; 的宽度，以便width相对于最近的祖先width是＆＃34 ;父母的父母＆＃34;。

最后，＆＃34;差距＆＃34;元素之间是display:inline-block元素的常见问题。一个常见的解决方案是注释掉空白，或者直接将元素放在彼此旁边，例如</div><div>。

HTML：

<div class="outer">
    <div class="stretch">
        <div class="item item1">1</div><!--
        --><div class="item item2">2</div>
    </div>
</div>

CSS：

.outer{
    width: 100px;
    background: red;
    border: 5px solid #000;
}

.stretch{
    white-space:nowrap;
}

.item{
    width:100%;
    height: 100px;
    display:inline-block;
}

.item1{
    background: green;
}

.item2{
    background: blue;
}

将元素的宽度设置为相对于父容器的父级100％

2 个答案: