gpt4 book ai didi

html - 2 不同高度的 iFrame 放在同一个页面上显示大小相同

转载 作者:行者123 更新时间:2023-11-28 00:23:57 24 4
gpt4 key购买 nike

我有两个独立的<iframe>同一页面上的标记。

它们都在 <container> 中div 和每个 <iframe>仅显示每个页面的一部分。

问题是当我尝试将它们放在同一页时,底部 <iframe>与顶部高度相同<iframe>即使我设置了每个 <iframe> 的高度明确地。

即使每个 <iframe>设置为不同的高度,当我尝试将它们放在一起时,它会把事情搞砸。

如有任何帮助,我们将不胜感激。谢谢!

这是我的代码:

HTML:

<div dir="ltr" style="text-align: left;" trbidi="on">
<title></title>
<style type="text/css">
<!--
#container{
width: 380px;
height: 360px;
overflow: hidden;
}

#container iframe {
width: 600px;
height: 475px;
margin-left: -15px;
margin-top: -90px;
border: 0;
}
-->
</style>
<div id="container">
<iframe height="200" scrolling="no" src="https://docs.google.com/spreadsheet/viewform?hl=en_US&amp;formkey=dHJjVk94bExPMmxtaExmX1FSckpicGc6MQ#gid=0" width="600">
</iframe>
</div>
</div>

<div dir="ltr" style="text-align: left;" trbidi="on">
<title></title>
<style type="text/css">
<!--
#container {
width: 400px;
height: 65px;
overflow: hidden;
}

#container iframe {
width: 600px;
height: 675px;
margin-left: -20px;
margin-top: -350px;
border: 0;
}
-->
</style>

<div id="container">
<iframe height="200" scrolling="no" src="http://scores.espn.go.com/nfl/boxscore?gameId=310818027" width="600">
</iframe>
</div>
</div>

最佳答案

同一 html 文档中任何元素的 id 属性值必须是唯一的。你不应该有两个 <div> ID 为 container 的元素在同一页上。

如果您需要两个元素具有相似的样式,您可以对每个元素使用相同的类属性。

在这种情况下,您希望拥有不同的样式,因此我的建议是更改每个容器 div 的 ID。

HTML:

<div dir="ltr" style="text-align: left;" trbidi="on">
<title></title>
<div id="spreadsheet">
<iframe scrolling="no" src="https://docs.google.com/spreadsheet/viewform?hl=en_US&amp;formkey=dHJjVk94bExPMmxtaExmX1FSckpicGc6MQ#gid=0" width="600">
</iframe>
</div>
</div>

<div dir="ltr" style="text-align: left;" trbidi="on">
<title></title>
<div id="scores">
<iframe scrolling="no" src="http://scores.espn.go.com/nfl/boxscore?gameId=310818027">
</iframe>
</div>
</div>

CSS:

#spreadsheet{
width: 380px;
height: 360px;
overflow: hidden;
}

#spreadsheet iframe {
width: 600px;
height: 470px;
margin-left: -5px;
margin-top: -80px;
border: 0;
}

#scores {
width: 400px;
height: 65px;
overflow: hidden;
}

#scores iframe {
width: 600px;
height: 685px;
margin-left: -20px;
margin-top: -375px;
border: 0;
}

注意:

CSS 最好放在不同 URL 的单独文档中,并在 <link> 中引用。 <head> 中的标签HTML 文档的一部分。如果您需要内联样式,最好将它们包含在 <head> 中。 <style> 中的文档部分标签。

我在 jsfiddle 中放置了这些更改的示例.

关于html - 2 不同高度的 iFrame 放在同一个页面上显示大小相同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7126353/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com