html - iframe 文本没有出现

标签 html css

我有这个代码片段,但它不起作用,文本没有显示在 iframe 中。

body {
  background-color: grey;
  border: grey solid 1px;
}

p.para1 {
  margin: auto;
  width: 40%;
  border: 3px solid black;
  padding: 20px;
  background-color: black;
  color: white;
}
iframe.sidepanels1 {
  border: 5px dotted green;
  background-color: grey;
  position: absolute;
  top: 10px;
  right: 10px;
  width: 320px;
  height: 550px;
  text-align: center;
}
iframe.sidepanels2 {
  border: 5px dotted green;
  background-color: grey;
  position: absolute;
  top: 10px;
  left: 10px;
  width: 320px;
  height: 550px;
}
p.iframe {
  position: absolute;
  top: 20px;
  text-align: center;
}
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="mystyle.css" type="text/css">
    <body>
      <center><p class="para1">This is a lot of shit to be written here<br> and this is just an example of this shit m8</p></center>
      <iframe class="sidepanels1"><p class="iframe">Testing</p></iframe>
      <iframe class="sidepanels2"><p class="iframe">Trying</p></iframe>
    </body>
  </head>
</html>

最佳答案

为什么要使用 iframe

iframe 用于将另一个 HTML 页面嵌入到当前页面中。检查this

iframe 更改为 div 即可。

body {
    background-color: grey;
    border: grey solid 1px;
}

p.para1 {
    margin: auto;
    width: 40%;
    border: 3px solid black;
    padding: 20px;
    background-color: black;
    color: white;
}
div.sidepanels1 {
    border: 5px dotted green;
    background-color: grey;
    position: absolute;
    top: 10px;
    right: 10px;
    width: 320px;
    height: 550px;
    text-align: center;
}
div.sidepanels2 {
    border: 5px dotted green;
    background-color: grey;
    position: absolute;
    top: 10px;
    left: 10px;
    width: 320px;
    height: 550px;
}
p.iframe {
    position: absolute;
    top: 20px;
    text-align: center;
}
<center><p class="para1">This is a lot of shit to be written here<br> and this is just an example of this shit m8</p></center>
<div class="sidepanels1"><p class="iframe">Testing</p></div>
<div class="sidepanels2"><p class="iframe">Trying</p></div>

此外,您不能在 head 中包含 body

你必须检查 HTML basic structuretags meanings , .

关于html - iframe 文本没有出现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35940028/

相关文章:

javascript - 我可以创建可以在 CSS、JS 和 HTML 之间共享的自定义颜色定义吗?

html - <div> 标签内的文本 - 语义正确与否?

html - 为什么输入的默认最大长度为 524288?

html - 自定义 CSS 不适用于 Bootstrap

css - 为什么 `white-space` 在 IE 和 Firefox 之间不一致?

javascript - 如何使 svg 下的背景图像的任何部分都具有双色调?

css - 无法理解带有图形标签 HTML5 的空间要求

html - 如何在 pre 标签中换行?

css - 如何正确地将 CSS 样式应用于有序列表中的 H 元素

使用纯 CSS 在点击时进行 CSS3 转换