2016-03-11 61 views
0

我有這段代碼片段,但它不工作,文本不顯示內部框架。Iframe文本does not

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>

+0

iframe是正常使用,如果你想放置文本通過你的I幀佔用的空間加載外部網頁如SRC =「page.htm」,您將得到更好地更改它們到div標籤 – Ben

+2

您真的只是把''放在''裏面嗎? – Phiter

回答

2

爲何使用iframe

iframe用於在當前頁面中嵌入另一個HTML頁面。檢查this

更改iframediv它會工作。

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>

你也不能有headbody

您必須檢查HTML basic structuretags meanings,。

0

您可以將要顯示在iframe中的HTML代碼添加爲srcdoc 屬性。

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"> 
 
    </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>