我有一个 75% 宽度和 100% 高度的主 div。首先，背景图片直到最后才出现。其次，在 div 内部，我有两个 div，一个在左边，一个在右边。在右边，我主要是文本，在较小的分辨率下，文本会超出 div，尽管它有 100% 的高度。我试图设置像素高度，但在不同的分辨率下看起来不对。有什么解决办法吗？
此外，在某些分辨率下，左侧的 div 上方似乎有太多空间，但在其他分辨率下，右侧的 div 上方有太多空间。我只是不明白我做错了什么。
这是部分代码。另外，我也使用了一张 table ，以便安排两个较低的 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>
最佳答案
我做了我认为您描述的更改。如果你想让你的背景在整个屏幕上重复，那么你必须用 background-repeat: repeat; 告诉它重复我也把这个应用于 html 标签而不是 body 标签。
这可能是设计使然，但对我来说，您似乎想将主要部分分成几列，在这种情况下，您需要在左列上使用 float: left;...同样，这仅取决于您想要什么，不应该对任何事情产生影响。
但就我个人而言，我会衡量您的目标受众是什么，并弄清楚最低分辨率是多少。从那个设计到你在左边我们右边增加的更高分辨率的边距。
关于css - Div 页面设计在其他分辨率下看起来不对，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10133939/