0

我有以下代码，当在浏览器中显示不需要水平滚动条时，它会很烦人。

当我在标题中添加两个类时，水平条被添加到浏览器中。有人知道我必须调整什么才能摆脱酒吧吗？提前谢谢了。

<html>
   <head>
      <link href = "style.css" rel = "stylesheet" type = "text/css">
   </head>
   <body>
      <div id="header">
         <img src="uploads/brand.png">
         <p><p>
            <img src="uploads/rules.png">
            <div class="fbplugin">
               dsds
            </div>
            <div class = "counter">
               dsds
            </div>
         </p></p>
      </div>
      <div id = "divide"></div>
      <div id = "body">
         <div class = "container">
            stuff
         </div>
      </div>
   </body>
</html>

这是CSS：

#header {
   width: 100%;
   height: 140px;
}
#divide {
   width: 100%;
   height: 2px;
   background-color: red;
}
#body {
   width:100%;
   height:1000px;
   cursor:pointer;
}
.fbplugin{
   position: relative; top: -60px; left: 1000px;
}
.counter{
   position: relative; top: -130px; left: 1100px;
}
.container{
   width: 600px;
   margin-right: auto;
   margin-left: auto;
   height: 500px;
   background-color: white;
}
4

1 回答 1

1

您position: relative;在两者上都使用.fbplugin并.counter基本上将它们移动到标题的右侧。通过使用position: relative，您可以将元素从其初始位置移动，但它仍会占用初始位置的空间。这就是你有滚动条的原因。

取而代之float的是右侧的两个 div，因此它们不会跨越标题的长度，并使用边距/填充将它们垂直定位。这将摆脱水平滚动条。

示例：http: //jsfiddle.net/AqLMY/2/

于 2013-02-24T18:20:47.920 回答