我正在为一项作业制作网页。我目前正在完成布局。我已经弄清楚了大部分模板，但我遇到了不需要的间距问题。当我将内容输入 div 容器超过 1 行时，空格是 创建时将侧边栏与导航栏分开。
这里的例子:
不受欢迎的外观: http://jsfiddle.net/z1pbt8c5/
想要的外观: http://jsfiddle.net/zckmw9vz/
HTML
<body>
<!-- nav bar code -->
<nav class="nav">
<a class="zenitLink" href="#">My Zenit Account</a>|
<a class="home" href="#">Home</a> |
<a class="imgGal" href="#">Photo Gallery</a> |
<a class="video" href="#"> Video</a> |
<a class="audio" href="#">Audio</a> |
<a class="html5" href="#">HTML5</a> |
<a class="tblCSS" href="#">Tables with CSS</a> |
<a class="forms" href="#">Forms</a> |
<a class="cssUsed" href="#">CSS Used</a> |
<a class="extra" href="#">Extra</a>
</nav>
<!-- end of nav bar code -->
<!-- main content -->
<div id="container">
<p>testtest test test testtest test test testtest test test testtest test test testtest test test testtest test test testtest test test testtest test test testtest test test testtest test test testtest test test testtest test test testtest test test testtest test test testtest test test test</p>
</div>
<!-- end of main content -->
<!-- side Bar code code -->
<aside id="sideBar">
<p>testtest test test testtest test test testtest test test testtest test test testtest test test testtest test test testtest test test testtest test test testtest test test test</p>
</aside>
<!-- end of side bar code -->
<!-- social media bar -->
<aside id="socialMedia">
<center><img src="images/social-media.png"></center>
</aside>
<!-- end of social media bar -->
</body>
最佳答案
问题是您在 #sidebar 和 #socialMedia 上使用了 clear:both;。这样做的效果是它们实际上位于您的主要内容下方。
您试图用负边距解决这个问题，但该边距实际上取决于您主要内容的高度，并且随着它的高度增加，这 2 个元素又被压低了。
消除 clear:both; 和 margin-top:-90px; 解决了这个问题，看看这个 updated Fiddle
关于css - 不需要的间距和旁边没有正确定位，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29023061/