1

我有一个 75% 宽度和 100% 高度的主 div。首先，背景图像不会一直走到最后。其次，在 div 里面，我有两个 div，一个在左边，一个在右边。在右边，我主要是文本，在较小的分辨率下，文本会脱离 div，尽管它有 100% 的高度。我试图设置像素高度，但在不同的分辨率下看起来是错误的。有什么解决办法吗？

此外，在某些分辨率下，左侧 div 上方似乎有太多空间，但在其他分辨率下，右侧 div 有。我只是不明白我做错了什么。

这是代码的一部分。另外，我也使用了一张桌子，以安排两个较低的 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; 我也将此应用于html标签而不是body标签。

这可能是设计使然，但对我而言，您似乎想将主要部分拆分为列，在这种情况下您需要float: left;在左列上使用...这再次取决于您想要什么，不应该对任何事情都有影响。

不过，就个人而言，我会衡量您的目标受众是什么，并找出最低分辨率是多少。从那个设计到你在左边增加边距的那个，我们在更高分辨率的右边。

于 2012-04-13T01:31:40.393 回答