Question

我有一个75％宽度和100％高度的主要div。首先，背景图像直到最后都不会一直存在。其次，在div中，我有两个div，一个在左边，一个在右边。在右边的一个我主要是文本，而在较小的分辨率，文本离开div，虽然它有100％的高度。我试图设置像素高度，但它在不同的分辨率上看起来不对。任何解决方案？

另外，左边的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>

Answer 1

jsfiddle

我做了我想你所描述的改变。如果您希望自己的背景在整个屏幕中重复，那么您必须告诉它重复background-repeat: repeat;我还要将其应用于html标记而不是body标记。

这可能是设计的，但对我来说，看起来你想将主要部分拆分成列，在这种情况下你需要在左栏上使用float: left; ...再次这取决于你想要什么，不应该对任何事情产生影响。

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

Div页面设计在其他分辨率中看起来有误

1 个答案: