调整浏览器窗口大小时图像浮动
Posted
技术标签:
【中文标题】调整浏览器窗口大小时图像浮动【英文标题】：Imaging floating when resizing browser window 【发布时间】：2015-09-03 11:46:05 【问题描述】：一直在尝试让我的 .gif 徽标漂浮在我的标题图像上，即使在调整页面大小时也会粘在那里 差不多了，然后我调整了我的窗口大小。我是不是在浪费时间，因为我实际上已经放弃了几个小时没有运气的尝试。
<head>
<meta charset="utf-8" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>B.13 DJ Hire</title>
<link rel="stylesheet" type="text/css"
href="http://yui.yahooapis.com/2.8.0r4/build/reset/reset-min.css">
<link rel="stylesheet" type="text/css" media="screen" href="bubba.css"/>
</head>
<body>
<div id="box">
<div id="header">
<a href="index.html" class="banner">
<img src="images/banner.jpg">
</a>
<a href="index.html" class="logo">
<img src="images/logo.gif">
</a>
</div>
<h1>B13. DJ Equipment Hire</h1>
<nav>
<ul id="mainnav">
<li class="home"><a href="index.html">Home</a></li>
<li class="mixers"><a href="mixers.html">Mixers</a></li>
<li class="turntables"><a href="turntables.html">Turntables</a></li>
<li class="mp3"><a href="mp3.html">MP3 Media Players</a></li>
<li class="headphones"><a href="headphones.html">Headphones</a></li>
<li class="contact"><a href="contact.html">Contact Us</a></li>
</ul>
</nav>
<h2> Our Equipment Range<h2>
<br><br>
<p> we are a equipment hire company..</p>
<br>
<p id="footer">45 Marsh Grass Ln. • Marble, MN 55764 • (218) 555-5253</p>
</div>
</body>
这是我的 CSS 代码
body
padding: 0;
margin: 0;
font-family: tahoma, arial, helvetica, sans-serif;
h1, h2
text-align: center;
font-family: georgia, "times new roman", times, serif;
h1
margin: 0;
font-size: 2em;
color: white;
background: #585858;
line-height: 1.90em;
width: auto;
text-align: centre;
background-position: center;
text-shadow: 2px 2px 4px #000000;
border-radius: 0.30em;
h2
font-size: 1.5em;
#box
border-style: none;
width: 70em;
padding: 0em;
margin-left: auto;
margin-right: auto;
background: #C2C2C2;
#header
.banner img
position: relative;
float: left;
height:206px;
width:1120px;
z-index: 1;
display:block;
.logo img
position: absolute;
float:right;
margin-top: 0px;
margin-left: 0px;
z-index: 2;
height:290px;
width:712px;
bottom:335px;
right:50px;
#footer
background: #A6A6A6;
text-align: right;
padding: 0.25em;
margin: 0;
.callout
font-weight: bold;
#mainnav
text-align: center;
background: #A6A6A6;
padding: 0.75em;
margin: 0;
position: relative;
border-radius: 0.5em;
#mainnav li
display: inline-block;
list-style-type: none;
padding: 0;
background: A6A6A6;
color: #A6A6A6;
#mainnav a:link
color:black;
background-color: transparent;
text-decoration: none;
#mainnav a:hover
color: blue;
background-color:#C2C2C2;
text-decoration: underline;
text-shadow: 8px 12px 12px blue;
#mainnav a:visited
color: black;
#mainnav li.home a
color: black;
padding: 10px 20px;
border-top: 2px solid #A6A6A6;
border-bottom: 2px solid #A6A6A6;
#mainnav li.home a:hover
color: black;
background-color:#C2C2C2;
padding: 10px 20px;
#mainnav li.mixers a
color: black;
padding: 10px 20px;
border-top: 2px solid #A6A6A6;
border-bottom: 2px solid #A6A6A6;
#mainnav li.mixers a:hover
color: black;
background-color:#C2C2C2;
padding: 10px 20px;
#mainnav li.turntables a
color: black;
padding: 10px 20px;
border-top: 2px solid #A6A6A6;
border-bottom: 2px solid #A6A6A6;
#mainnav li.turntables a:hover
color: black;
background-color:#C2C2C2 ;
padding: 10px 20px;
#mainnav li.mp3 a
color: black;
padding: 10px 20px;
border-top: 2px solid #A6A6A6;
border-bottom: 2px solid #A6A6A6;
#mainnav li.mp3 a:hover
color: black;
background-color:#C2C2C2 ;
padding: 10px 20px;
#mainnav li.headphones a
color:#black;
padding: 10px 20px;
border-top: 2px solid #A6A6A6;
border-bottom: 2px solid #A6A6A6;
#mainnav li.headphones a:hover
color: black;
background-color:#C2C2C2 ;
padding: 10px 20px;
#mainnav li.contact a
color: black;
padding: 10px 20px;
border-top: 2px solid #A6A6A6;
border-bottom: 2px solid #A6A6A6;
#mainnav li.contact a:hover
color: black;
background-color:#C2C2C2 ;
padding: 10px 20px;
#slideshow
position:absolute;
text-align: center;
#pics
margin-left: auto;
margin-right: auto;
width: 50%;
float: right;
text-align: center;
#content
position: relative;
#content img
position: absolute;
top: 0px;
right: 0px;
img
max-width: 120%;
display: block;
background-size: 100%;
img
max-width: 100%;
display: block;
#slideshow
wd
【问题讨论】：
你的意思是这样？ jsfiddle.net/3L29qv5q/1 【参考方案1】：你说你想浮动你的图片，你有float 为标志样式，但你也有position:absolute 。你需要使用其中一个来实现你的目标，我的朋友。
您的代码中还缺少一些关闭的 DIV。您可以分享您的问题的网址吗？这可能比看到不完整的代码更容易。
【讨论】：
【参考方案2】：您的 CSS 样式 (position:absolute) 导致了问题。除了您将其精确定位在页面上的固定位置之外，您的位置属性（如“顶部”“底部”“左侧”和“右侧”）。当您在页面上的某个位置（例如在您的标题中）有一个徽标时，您不希望这样做。要解决此问题，您需要删除“.logo img”的 CSS 下的内容并输入以下内容：
.logo img
height:200px;
width:200px;
这是一个例子：https://jsfiddle.net/Lp7fwm7a/。当您调整窗口大小时，徽标会按照您想要的方式保留在正确的位置。
如果您的标题中有两个 div，您可能还想查看 float 属性。这是一篇很好的文章：https://css-tricks.com/all-about-floats/。
【讨论】：
【参考方案3】：使用位置：绝对；属性表示图像是根据浏览器窗口定位的（因为页面上没有任何其他绝对定位元素）。
您的顶部和底部值是从浏览器窗口的边缘计算的，而不是从图像的边缘计算的。
您可以将 .logo img 替换为：
position: absolute;
left: 0;
right: 0;
margin: 0 auto 0;
height: 290px;
width: 712px;
z-index: 2;
您的徽标比标题图片高很多。我注意到您代码中徽标的顶部被切断了，不确定您是否打算这样做，但如果您编辑边距中的第一个 0，您可以调整顶部边距。 -100px 左右应该把它放回原来的位置。
也只是对其他答案所说的内容的评论，您并没有错过结束 div 标记 - 只是缩进确实不一致，使您的 HTML 和 CSS 真的难以阅读。您在结束 h2 标记中缺少 /，并且在 h1、h2 CSS 中将“中心”拼写为“中心”。
这是所有修复（包括缩进）的链接：http://codepen.io/anon/pen/KpXKVG
【讨论】：
对不起，我是 html 新手，我应该在工作中更加小心 别担心，这只是一般性评论。你在使用文本编辑器吗？语法高亮应该真的很有帮助。此外，大多数编辑器都有热键，可以随时为您编写结束标签。还有……我的例子怎么样？它对你有用吗？ 使用记事本++，你的例子很好，凯瑟琳，标志终于坚持了我想要的样子，对我来说java比html代码更容易 啊，是的，它可能有点迷失方向。很高兴它起作用了 - 不要忘记标记已回答的问题！ ;)以上是关于调整浏览器窗口大小时图像浮动的主要内容，如果未能解决你的问题，请参考以下文章