幅 75%、高さ 100% のメイン div があります。まず、背景画像が最後までいきません。次に、div 内に 2 つの div があり、1 つは左側に、もう 1 つは右側にあります。右のものでは、ほとんどがテキストで、解像度が小さいと、高さは 100% ですが、テキストは div からはみ出します。ピクセルの高さを設定しようとしましたが、解像度が異なると正しく見えません。解決策はありますか?
また、一部の解像度では左の div の上にスペースが多すぎるように見えますが、他の解像度では右の div がそうです。私は自分が間違ったことをしただけではわかりません。
これがコードの一部です。また、下の 2 つの div を配置するために、テーブルも使用しました。私はそれがおそらく混乱していることを知っています。:D
CSS:
body {
height: 100%;
font-family: Tahoma,sans-serif;
background-image: url("images/pattern.jpg");
color: #005200;
font-size: 15px;
text-align: left;
}
html {
background: #47B224;
height: 100%;
}
.main {
background: white;
width: 76%;
margin: 0;
padding: 10px;
border: 1px solid black;
height: 100%;
position: absolute;
top: 0;
left: 50%;
margin-left: -38%;
}
.left {
margin: 5px;
text-align: left;
width=135px;
}
.right {
padding: 5px;
float: right;
text-align: left;
}
table {
margin-top: 20px;
padding: 20px;
padding-top: 0px;
}
残りは次のようになります。
<body>
<div class="main">
<table>
<td>
<div class="left">
Content:left
</div>
</td>
<td>
<div class="right">
Content:right
</div>
</td>
</div>
</body>