Question

我为作业制作了一个网页。我目前正在完成布局。我已经找到了大部分模板，但我遇到了不需要的间距问题。当我在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>

Answer 1

问题是您在clear:both;和#sidebar上使用了#socialMedia。这样做的结果是它们实际上位于主要内容之下。

你试图用负边距来修复它，但是这个边距实际上取决于你主要内容的高度，随着它的高度增加，这两个元素再次被推下来。

与clear:both;一起消除margin-top:-90px;可解决问题，请查看此updated Fiddle

不需要的间距，一边不能正确定位

1 个答案: