Question

我正在尝试让某些事情发挥作用，我现在很疯狂。

我创建了一个非常有趣的小网站，但我遇到了一件让我烦恼的事情。

这是我提出的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; }

我也在这里尝试了几个答案的例子，但他们没有显示正确的结果。我做错了什么？

Answer 1

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

#social {
    float: left;
}

或者你可以创建两个div内联块元素：

#container {
    display: inline-block;
}

#social {
    display: inline-block;
}

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

没有包装的两个DIV彼此相邻

1 个答案: