1

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

1 に答える 1

1

jsfiddle

私はあなたが説明していると思う変更を加えました。画面全体で背景を繰り返したい場合は、繰り返してもらうように指示する必要があります。これは、タグではなくタグにbackground-repeat: repeat; も適用されます。 htmlbody

これは設計によるものかもしれませんが、私には、メインセクションを列に分割したいように見えました。その場合はfloat: left;、左側の列で使用する必要があります...これも、必要なものに応じて異なり、すべきではありません。何にでも影響を与えます。

個人的には、私はあなたのターゲットオーディエンスが何であるかを測定し、最小解像度が何であるかを理解します。そのデザインから、より高い解像度で左から右にマージンを追加したデザインまで。

于 2012-04-13T01:31:40.393 に答える