Html 强制父div（表）扩展到最大宽度

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

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

父div具有自适应布局。我们不知道

max width

的具体值，我们只能修改

placeholder

或

iframe

我们无法修改包装器

通过此设置，

iframe

的宽度将为300px。如果我们用足够的文本填充占位符，那么

iframe

的宽度将为800px

---

我们的目标是使

iframe

与父

div

的最大宽度一样宽，而没有难看的解决办法。

由于包装器

div

是一个

显示：表

元素，您应该使

iframe

和占位符都成为

显示：表行

---

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

对于

iframe

使用位置

绝对

，对于父对象使用位置

相对

：

<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%;
}

---

您的包装div没有实际宽度，因此如果将其设置为
100%
，它将适应屏幕宽度，并且不会重叠或超过
最小宽度
和
最大宽度

#a {
    min-width: 300px; 
    max-width: 800px; 
    display: table;
    width: 100%;
}

父宽度可以是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>

似乎不起作用。也许目标不明确，更新了一点。