2017-01-05 17 views
0

私はHTMLが初めてで、かなり簡単なことをしたいと思っています。私は同様の質問を探して解決策を試しましたが、誰も働いていません。HTMLで2つの文書を並べて表示する

リンクをクリックすると、2つのドキュメントを並べて表示する必要があります。ドキュメントはリモートに格納され、静的ではありません。 1つはPDF、もう1つは画像なので、PDFが埋め込まれてスクロールバーがある必要があるかもしれないと思いますか?

両方の文書が表示されていますが、2番目の文書(画像)が部分的に画面の中央に最初に置かれています。次のように

私が持っているコードは次のとおりです。

<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()関数は、画面の文書が表示されているとき時に画面を暗くするだけであることに注意してください。

これについてのお手伝いがあれば幸いです。

+0

[ブートストラップ](http://getbootstrap.com/)を使用できますか? –

+0

これはPHPに関する質問ではありませんが、 '?php echo $ address?>'はエラーです。また、それを使いやすく、スタイリングするのが簡単だと思うモーダルを見たいかもしれません。 – chris85

+0

私はPHPコードを使用してファイルのリモートアドレスを抽出しているので、<?php echo $ address?>が必要です。 –

答えて

0

チェックアウトの例ここhttp://n-demo.000webhostapp.com/two_docs.html

私はあなたがあまりにも同様に埋め込みを使用することができ、ここではインラインフレームを使用していました。ここで

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>

stackoverflowの中スニペットはすでにIFRAME内にあるとiframeが別のiframe内にロードすることができないよう現在のiframeを見ることができるように文句を言いません。

関連する問題