Question

我正在开展一个时间敏感的项目。任务是建立一个用户可以通过智能手机访问的微型网站，在那里他们可以访问许多电影。他们将扫描二维码（我知道他们已经死了，我没有计划这个活动）。并登陆这个网站。我不是一个有识之士，但我知道我的方式围绕html + css，我已经能够在互联网上找到一些东西，但现在我已经走到了尽头。我正在优化网站最大宽度640px，100％可扩展宽度，最小宽度为320px。我已经在我的测试网站上完成了很好的工作，实现了字体等。但是当我试图将## wordbox放在#sunny div中时，我遇到了一个问题，在#image div之上。我设法将#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;
}

N.B：请记住我需要重复代码，并且彼此之间有7或8个“相同”区域，因此CSS必须适用于此设计。

希望有人能够帮助我：）

Answer 1

似乎是使用太多div的情况。你需要做的是将你的元素放在一个div中，其位置为：relative，然后将元素本身定位为position：absolute，然后按照你的意愿定位它们。

响应/流畅/移动优化站点：绝对元素的最高属性 - 可以“缩放”

1 个答案: