Question

一直试图让我的徽标是一个.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. &#8226; Marble, MN 55764 &#8226; (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

Answer 1

您说要浮动您的图片，并且您已为徽标样式声明了float，但您也说明了position:absolute。您需要使用其中一个来实现我的朋友的目标。

此外，您在代码中缺少一些结束DIV。你可以分享你的问题的URL吗？这可能比看到不完整的代码更容易。

Answer 2

你的CSS样式（位置：绝对）导致问题。随着您将其准确定位在页面上的固定位置，并且您的位置属性如＆＃34; top＆＃34; ＆＃34;底部＆＃34; ＆＃34;左＆＃34;和＃34;对＆＃34;。当您在页面上的某个位置没有移动徽标时（例如在标题中），您不希望这样。要解决此问题，您希望删除CSS下的内容，以及＃34; .logo img＆＃34;并提出以下内容：

.logo img  {
    height:200px;
    width:200px;
}

以下是它的示例：https://jsfiddle.net/Lp7fwm7a/。调整窗口大小时，徽标会保持在正确的位置，就像您想要的那样。

如果标题中有两个div，您可能还需要查看float属性。这是一篇很好的文章：https://css-tricks.com/all-about-floats/。

Answer 3

使用位置：绝对; attribute表示根据浏览器窗口定位图像（因为页面上没有任何其他绝对定位元素）。

您的顶部和底部值是从浏览器窗口边缘开始计算的，而不是从图像边缘开始计算。

您可以将 .logo img 替换为：

您的徽标比标题图片高很多。我注意到代码中的徽标顶部被切断了，不确定你是否打算这样做但是如果你在边距中编辑第一个0，你可以调整上边距。 -100px左右应该把它放回原处。

另外，只是评论其他答案所说的内容，你不会错过一个结束的div标签 - 只是真正不一致的缩进使你的HTML和CSS真的难以阅读。你在关闭的h2标签中缺少一个/，并拼写了“中心”＃39;作为＆＃39;中心＆＃39;在你的h1，h2 CSS。

这是指向所有修复程序（包括缩进）的链接：http://codepen.io/anon/pen/KpXKVG

调整浏览器窗口大小时映像浮动

3 个答案: