我正在做一个对时间相当敏感的项目。任务是制作一个微型网站，用户可以通过智能手机访问该网站，在那里他们将能够访问许多电影。他们会扫描二维码（我知道他们已经死了，我没有计划竞选活动）。并登陆本网站。我不是一个狂热的人，但我知道我在html + css方面的方式，我已经能够在互联网上找到一些东西，但现在我已经走到了死胡同。我正在优化网站的最大宽度为 640px，宽度为 100% 可缩放，最小宽度为 320px。我已经在我的测试站点上运行良好，实现了字体等，但是当我尝试将div #textbox 放在 #sunnydiv 中时，我遇到了一个问题，位于 #imagediv 的顶部。我已经设法使 #textbox 居中，但是无论用户以什么尺寸查看页面，我都无法让它垂直对齐并"保持"垂直对齐。
这是我的代码和css：
.HTML：
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN"
"http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="container">
<div id="header">
<img id="logo" src="images/logo.png">
</div>
<div id="sunny">
<div id="image">
<img src="images/1.jpg">
</div>
<div id="textbox">
<p>Jacket Name</p>
<a href="http://www.google.com">See Details</a>
</div>
</div>
</div>
</body>
</html>
这是 CSS：
@font-face { font-family: FuturaStdBook; src: url('../fonts/FuturaStd-Book.otf'); }
@font-face { font-family: FuturaStdBook; font-weight: bold; src: url('../fonts/FuturaStd-Bold.otf'); }
#container
{
background: #fff;
font-family: FuturaStdBook, Georgia, "Times New Roman", Times, serif;
max-width:640px;
min-width:320px;
margin:0 auto;
}
#header
{
padding: 20px;
}
#logo
{
width:33%;
display:block;
margin:auto;
}
#sunny
{
width: 100%;
max-width:640px;
min-width:320px;
float:left;
position:relative;
}
#textbox {
background-color:white;
width:33%;
left:33%;
top:30px;
min-width: 70px;
height:50px;
text-align: center;
z-index:1;
position: absolute;
text-transform:uppercase;
padding-top:10px;
padding-bottom:10px;
color:#a3a3a3;
}
#textbox p {
font-size:14px;
line-height:0;
}
#textbox a {
font-size:12px;
color:#666666;
}
#image {
width:100%
position: absolute;
}
#image img{
width:100%;
height: auto;
}
注意：请记住，我需要重复代码，并且在彼此下面有大约 7 或 8 个"相同"的区域，因此 CSS 必须适用于此设计。
希望有人能够帮助我:)
似乎是使用太多div 的情况。你需要做的是将你的元素放在一个带有 position：relative 的div 中，然后将元素本身定位为 position：absolute 并根据需要定位它们。