Question

我有这段代码片段，但它不起作用，文字没有在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>

Answer 1

为什么使用iframe？

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

更改iframe的{{1}}，它会有效。

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>内找到body。

您必须查看HTML basic structure和tags meanings，。

Answer 2

您可以将要在iframe中显示的HTML代码添加为srcdoc 属性。

＆＃13;

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

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="mystyle.css" type="text/css">
  </head>
    <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" srcdoc="fsfsfsfsaf"></iframe>
      <iframe class="sidepanels2" srcdoc="safsdfsdfsf"></iframe>
    </body> 
</html>

＆＃13;

iframe文本没有出现

2 个答案: