0

我正在做一个对时间相当敏感的项目。任务是创建一个用户可以通过智能手机访问的微型网站，在那里他们将能够访问许多电影。他们会扫描二维码（我知道他们已经死了，我没有计划这个活动）。并登陆本网站。我不是字体设计者，但知道我在 html + css 周围的方式，我已经能够在互联网上找到一些东西，但现在我走到了死胡同。我正在将站点优化为最大宽度 640 像素，将 100% 的可缩放宽度缩小到 320 像素的最小宽度。我已经在我的测试站点上运行得很好，实现了字体等，但是当我尝试将 div #textbox 放在 #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;
}

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

希望有人能够帮助我:)

4

1 回答 1

0

似乎是使用太多 div 的情况。您需要做的是将元素放置在具有位置：相对的 div 中，然后将元素本身定位为位置：绝对并根据需要进行定位。

于 2013-09-10T12:34:11.760 回答