强制父div(表)扩展到max-width

时间:2015-04-02 18:01:01

标签: html css layout

以下代码段代表网页的相关部分。

<div id="a" style="min-width: 300px; max-width: 800px; display: table">
    <!-- Placeholder -->
    <iframe style="width: 100%">
    </iframe>
<div>

父div具有自适应布局。我们不了解max-width的具体价值,我们只能修改placeholderiframe我们无法修改包装

使用此设置,iframe将为300px宽。如果我们用占位符填充了足够的文本,那么iframe将是800px宽。

目标是让iframe与父div的最大宽度一样宽,而不会出现难看的变通方法。

4 个答案:

答案 0 :(得分:1)

absoluteiframe的位置relative用于父级:

<div id="a" ">
    <!-- Placeholder -->
    <iframe></iframe>
<div>

#a {
    position:relative;   
    max-width:800px; 
    min-width:300px;
}
#a iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}

Updated JsFiddle Example

答案 1 :(得分:1)

您的包装div没有实际宽度,因此如果您将其设置为100%,它将适应屏幕宽度,不会重叠或超过min-width和{{1 }}

max-width

Example

答案 2 :(得分:0)

由于您的包装器divdisplay: table元素,因此您应该将iframe和占位符都设为display: table-row

这将使它们适合父母的宽度。

答案 3 :(得分:0)

父宽度可以是100%(使用最小/最大宽度),iframe将继承。我使用边框来显示iframe如何适合父级。

<div id="a" style="min-width: 300px; width: 100%; max-width: 800px; border: 1px solid red;">
    <!-- Placeholder -->
    <iframe style="width: inherit; border: 1px solid blue;">
    </iframe>
<div>