ホームページ > 記事 > ウェブフロントエンド > HTML 上の div と table の位置が異なり、ブラウザがずれている場合の対処方法_html/css_WEB-ITnose
HTML 上の div と table の位置が異なり、ブラウザがずれている場合の対処方法_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:34:331889ブラウズ
Dreamweaver の HTML と CSS を使用して次のテーブルを作成しました:
ボックスはすべてテーブルで構成されており、1 つの列がテーブルであり、列の数と同じ数のテーブルがあります。
矢印は新しく作成された div で構成されており、各矢印は div です。
問題は、画面サイズを小さくしたりブラウザを変更すると、以下に示すように四角形と矢印の位置がずれるということです:
これら 2 つを統合するにはどうすればよいですか?一緒に拡大・縮小したり、位置を一緒に変更したりできます。
コードの一部は次のとおりです:
<style type="text/css">#apDiv1 { position: absolute; width: 200px; height: 115px; z-index: 3; left: 22px; top: 76px;}。。。。</style></head><body><table style border="0" cellpadding="0"> <td><table border="0" cellpadding="10"> <tr> <td bgcolor="#FFE66F"><b>ROE </b></td> <td rowspan='2'>←</td> <td bgcolor="#FFED97"><b>Financial Leverage</b></td> <td rowspan='2'>←</td> <td bgcolor="#FFF4C1"><b>ROA</b></td> <tr> </td></table> <td><table border="0" cellpadding="0"> <!--ROA 后的Frame --> <td>←<td><table style="height:230px;width:15px;border-color:000000;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-width:2px"><tr><td valign="top"></td></tr></td></table> </td></table> <td><table border="0" cellspacing="10" cellpadding="10"> <td bgcolor="#ACD6FF"><b>Net Margin</b></td> <td></td></tr> <tr> <td bgcolor="#F0F0F0"> {{dupont.Net_Margin}}</td> </tr> <tr><tr><tr><tr><tr><tr><tr><tr><tr><tr><tr><tr><tr><tr> <tr><td bgcolor="#A6FFA6"><b>Asset Turnover</td></b> <td></td></tr> <tr> <td bgcolor="#F0F0F0"> {{dupont.Asset_Turnover}}</td> </tr> </tr> </td></table></tr></table>。。。。。。。<!--这里就是加的箭头--》<div id="apDiv4"><td><table border="0" cellpadding="0"> <!--Net Margin 后的Frame --> <td>←<td><table style="height:160px;width:10px;border-color:000000;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-width:2px"><tr><td valign="top"></td></tr></td></table> </td></table> </div><div id="apDiv5"><td><table border="0" cellpadding="0"> <!--Asset Turnover 后的Frame --> <td>←<td><table style="height:160px;width:10px;border-color:000000;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-width:2px"><tr><td valign="top"></td></tr></td></table> </td></table> </div> ありがとうございます。
ディスカッションへの返信（解決策）
簡単ではありません。 pngを使って画像を作成することはできませんか? png の使用が許可されていない場合は、svg を試してください
それは簡単ではありません。 pngを使って画像を作成することはできませんか? svg を試すために png を使用することが許可されていない場合は、
いいえ、SQL データベースへの接続に Python と django を使用しているため、ボックスに表示されるデータは単なる画像ではなくデータベースから読み込まれます。
これは絶対位置か何かに関連していますか?
レイアウトに問題があるか、DIV 矢印の高さが十分に設定されていない可能性があります。上から下までの矢印の位置を DIV に設定し、矢印が表示される位置をパディングを使用して書き込みます。ずれてはいけません。
親子divを追加しましたが、まだ機能しません
矢印を背景画像として設定できます
矢印を背景画像として設定できます
ズームインすると、各矢印が背景画像として設定されます。またはアウト、場所はまだ変わります。 。 。
見ているだけで頭が痛くなります。すべてに絶対位置を使用し、矢印には背景画像を使用してください