用HTML并排显示两个文档

Question

I am new to HTML and wish to do something that should be fairly simple. 我刚接触HTML，并希望做一些应该很简单的事情。 I have searched for similar questions and tried the solutions, but none are working. 我已经搜索了类似的问题并尝试了解决方案，但是没有一个工作。

I want to display two documents in a web page side-by-side when a link is clicked. 单击链接后，我想在网页中并排显示两个文档。 The documents are stored remotely and are not static. 这些文档是远程存储的，并且不是静态的。 One is a PDF, the other is an image, so I feel the PDF may need to be embedded so there is a scroll bar? 一个是PDF，另一个是图像，所以我觉得可能需要嵌入PDF，以便有滚动条？

Both documents are displaying, but the second document (image) partially lays over the first in the centre of the screen. 两个文档都在显示，但是第二个文档（图像）部分位于屏幕中心的第一个文档上。

The code I have is as follows: 我的代码如下：

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

**Note that the lightbox_open() and lighbox_close() functions are simply there to dim the screen when the screen when the documents are displayed. **请注意，当显示文档时，lightbox_open（）和lighbox_close（）函数只是在此处使屏幕变暗。

Any help with this would be greatly appreciated. 任何帮助，将不胜感激。

Answer 1

Checkout an example here http://n-demo.000webhostapp.com/two_docs.html 在此处签出示例http://n-demo.000webhostapp.com/two_docs.html

I have used iframe here, You can use embed too similarly. 我在这里使用过iframe，您也可以类似地使用embed。

Here is a link to example that use embed 这是使用嵌入的示例的链接

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

Source code is exactly same just replaced iframe with embed. 源代码完全相同，只是将iframe替换为embed。

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

You Wont Be able to see the iframe here as the snippet in stackoverflow is inside a iframe already and iframe cannot be loaded inside another iframe. 您不会在这里看到iframe，因为stackoverflow中的代码段已经在一个iframe中，并且无法将iframe加载到另一个iframe中。

用HTML并排显示两个文档

问题描述

1 个解决方案

解决方案1
0 2017-01-05 14:20:33

用HTML并排显示两个文档

问题描述

1 个解决方案

解决方案1 0 2017-01-05 14:20:33

解决方案1
0 2017-01-05 14:20:33