gpt4 book ai didi

html - 响应式/流畅/移动优化网站 : Top attribute on absolute element - can it "scale"

转载 作者:行者123 更新时间:2023-11-28 12:23:18 27 4
gpt4 key购买 nike

我正在从事一个对时间相当敏感的元素。任务是制作一个微型网站,用户可以通过他们的智能手机访问该网站,在那里他们可以访问许多电影。他们会扫描二维码(我知道他们已经死了,我没有计划这次事件)。并登陆这个网站。我不是 fontender,但了解 html + css,我已经能够在互联网上找到一些东西,但现在我已经走到了死胡同。我正在针对最大宽度 640px 优化网站,将 100% 可缩放宽度降至 320px 的最小宽度。我已经在我的测试站点上运行得很好,实现了字体等。但是当我尝试将 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 必须适用于此设计。

希望有人能够帮助我:)

最佳答案

似乎是使用了太多 div 的情况。您需要做的是将您的元素放置在具有 position:relative 的 div 中,然后将元素本身定位为 position:absolute 并按照您的意愿进行定位。

关于html - 响应式/流畅/移动优化网站 : Top attribute on absolute element - can it "scale",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18718638/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com