以下代码段代表网页的相关部分。
<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
的最大宽度一样宽,而不会出现难看的变通方法。
答案 0 :(得分:1)
将absolute
和iframe
的位置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%;
}
答案 1 :(得分:1)
答案 2 :(得分:0)
由于您的包装器div
是display: 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>