重新调整网页大小导致div重叠

时间:2013-05-08 03:26:57

标签: css html navigationbar

我的网页出现问题。

右边的我的div标签重叠在我的中心列上...我已经为我的父div标签设置了一个最小宽度,但它没有帮助提升问题。

另外,我的导航栏给了我一个小问题。当我调整网页大小时,ENGAGEMENT将属于ABOUT标签。我在CSS中设置了display: block;display: inline;。它工作得很好只是重新调整大小会伤害我的网页..

我的布局很基本..

<body>
    <div style="width:100%; margin-top: -18px; clear: both;">
        <div style="width: 100%; height: 100px;  background-color: white;">
            <p style="padding-top: 3%;font-size:30px; font"><i>Welcome</i></p>
        </div>  

        <div style="width: 100%; display: block; overflow: hidden; ">
            <div><li><a href="http://www.albany.edu/" class="nav">About</a></li></div>
            <div><li><a href="http://albany.bncollege.com/" class="nav">Books</a></li></div> 
            <div><li><a href="#AM" class="nav">Electronics</a></li></div>  
            <div><li><a href="#UA" class="nav">Apparel</a></li></div>
            <div><li><a href="#SP" class="nav">Activities</a></li></div>
            <div><li><a href="#SL" class="nav">Engagement</a></li></div>
        </div>
        <div style="float: left; background-color:  white; margin-left: 80px;">
        </div>  
        <div id="left-col" style="clear: left;">
        </div>
        <div id="central-col">
        </div>      
        <div id="right-col" style="text-align: center; clear: right; ">
        </div>
        <div id="footer"><p style="text-align: center;">KNOWLEDGE IS POWER</p> </div>
    </div>
</body>

1 个答案:

答案 0 :(得分:1)

如果您已经提供了完整的代码(可能在jsfiddle上)会更好,因为通过查看代码很难理解这些div正在做什么。 (你已经制作了这么多。)

对于您的解决方案,我认为您必须删除

width: 100%

来自第二和第三个div。

您已将margin-left设置为80px,因此每当您调整窗口大小时,它的边距始终为80px。

我也想知道

的用法
  

溢出:隐藏;

代码。