0

我目前正在发疯，而我正在努力工作。

我创建了一个小网站是为了好玩和玩耍，但我遇到了一件让我非常烦恼的事情。

这是我想出的HTML：

<div id="container">
 <div id="header">
  <div id="cover-cloud">
   <div id="cloud" class="cloud stage"></div>
   <div id="cloud2" class="cloud2 stage"></div>
   <div id="cloud3" class="cloud3 stage"></div>
   <div id="cloud4" class="cloud4 stage"></div>
   <div id="heading"><h1>Website</h1></div>
  </div>
 </div>
 <div id="nav">
  <ul>
   <li><a href="#">Home</a></li>
   <li><a href="#">About Me</a></li>
   <li><a href="#">Links</a></li>
   <li><a href="#">Imprint</a></li>
   <li><a href="#">Contac</a></li>
  </ul>
 </div>
 <div id="lang">
  <ul>
   <li><a href="?lang=de"><img src="images/lang/de.gif" alt="DE"></a></li>
   <li><a href="?lang=en"><img src="images/lang/en.gif" alt="EN"></a></li>
  </ul>
 </div>
 <div id="content" class="clearfix">
  <div id="maincontent">
   <div class="contentblock">
    <h3>Home</h3>
     <p>Some welcome text or maybe news, who knows :)</p>
   </div>
  </div>
 </div>
 <div id="footer">Some footer content</div>
 <div id="valid">
  <ul>
   <li>Here comes the HTML validation thingy</li>
   <li>Here comes the CSS validation thingy</li>
  </ul>
 </div>
</div>
<div id="social">
 <div id="facebook"><img src="images/icons/facebook.png" alt="Facebook"></div>
 <div id="twitter"><img src="images/icons/twitter.png" alt="Twitter"></div>
 <div id="youtube"><img src="images/icons/youtube.png" alt="YouTube"></div>
</div>

现在我想在容器 DIV 的右侧有社交 DIV。我的理解是，社交 DIV 现在是从容器 DIV 而不是从屏幕左侧进行测量？但似乎我的理解完全不正确:(

这是两个 DIV 容器的 CSS：（仅在主页上有效，但是当我单击链接时，社交 DIV 再次跳转到左下角）

#container { width: 800px; margin: 25px auto 5px; background-color: #FFFFFF; border: 1px solid #000; border-radius: 5px; position: relative; }

#social { margin: -154px 0 0; overflow: hidden; width: 45px; }

我还在这里尝试了一些答案示例，但它们没有显示正确的结果。我究竟做错了什么？

4

1 回答 1

0

块元素（如 div）采用其父元素的 with，并始终以换行符开头。给块元素一个宽度是不够的，你必须告诉它保持在同一行。您可以通过浮动来做到这一点：

#social {
    float: left;
}

或者您可以将两个 div 都设为 inline-block 元素：

#container {
    display: inline-block;
}

#social {
    display: inline-block;
}

这两种方法有不同的缺点，但这是另一回事。

于 2013-08-14T12:15:13.023 回答