與HTML並排顯示兩個文檔

我是HTML新手，希望做一些相當簡單的事情。我已經搜索了類似的問題並嘗試瞭解決方案，但都沒有工作。與HTML並排顯示兩個文檔

我想要在單擊鏈接時並排顯示網頁中的兩個文檔。文檔遠程存儲，不是靜態的。一個是PDF，另一個是圖像，所以我覺得PDF可能需要嵌入，所以有一個滾動條？

兩個文檔都在顯示，但第二個文檔（圖像）部分覆蓋了屏幕中央的第一個文檔。

我的代碼如下：

<a href= "#" onclick= "lightbox_open();"><b>Click me to view files</b></a> 

<div id= "light"><a href= "#" onclick= "lightbox_close();"><embed src= "?php 
echo $address ?>" style= "float: left;"/><img src = "<?php echo $address2 
?>" style= "float: left; " /></a></div> 

<div id= "fade" onclick="lightbox_close();"></div> 

<div>

**注意lightbox_open（）和lighbox_close（）的函數是有顯示的畫面時，文檔時調暗屏幕。

任何幫助，這將不勝感激。

來源

2017-01-05 Juani Tab

你可以使用[Bootstrap]（http://getbootstrap.com/）嗎？ –

雖然這不是一個PHP問題'？php echo $ address？>'是一個錯誤。你也可能想看看模式，我認爲它會更容易使用，然後造型。 – chris85

我使用php代碼提取文件的遠程地址，因此需要<？php echo $ address？>。 –

結帳這裏的例子http://n-demo.000webhostapp.com/two_docs.html

我在這裏使用的iframe，您可以使用嵌入太相似。

下面是示例使用嵌入

http://n-demo.000webhostapp.com/embed_two_docs.html

源代碼是完全相同的剛更換的iframe與嵌入的鏈接。

<style> html, 
 
body { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
#doc1, 
 
#doc2 { 
 
    display: inline-block; 
 
    width: 49%; 
 
    height: 100% 
 
} 
 
iframe { 
 
    width: 100%; 
 
    height: 100%; 
 
    border: none; 
 
} 
 
#doc1 { 
 
    background-color: red; 
 
} 
 
#doc2 { 
 
    background-color: blue; 
 
}

<html> 
 

 
<head> 
 
</head> 
 

 
<body translate="no"> 
 

 
    <div id="doc1"> 
 
    <iframe src="http://www.pdf995.com/samples/pdf.pdf"></iframe> 
 
    </div> 
 

 
    <div id="doc2"> 
 
    <iframe src="http://www.pdf995.com/samples/pdf.pdf"></iframe> 
 
    </div> 
 
</body> 
 

 
</html>

您將無法在這裏看到的iframe在計算器的片段是一個IFRAME裏面已經和iframe不能在另一個iframe中加載。

來源

2017-01-05 14:20:33

與HTML並排顯示兩個文檔

回答

相關問題