CSSDIV布局求求助，用到float，现在不知道怎么让logo图片浮动后让菜单正常显示

Posted 2023-03-26

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSSDIV布局求求助，用到float，现在不知道怎么让logo图片浮动后让菜单正常显示相关的知识，希望对你有一定的参考价值。

Logo图片浮动后，其原先占据的空间会被清除，你可以给div加个边框看看其实际位置所占据的空间，估计，你的菜单栏是被图片覆盖看不到了？若想要使其正常显示，就要让他保留空间，或者给菜单栏设置margin。第一种方法，让其保留空间，估计你的是直接加img标签，然后对其进行浮动，这样的话，在div标签内部最后一个标签后面加个<div style="clear:both"><div>，清除浮动，外部div容器就可以包裹住浮动后的图片了，也就是让被因浮动后所占空间被清除的图片恢复空间。这样，菜单栏就不会和图片重合在一起，导致菜单栏看不到或显示不完整。另一种方法很简单，直接给包裹菜单栏的div加个margin-top:300px，就可以看到效果了参考技术A <!DOCTYPE html>
<html>

<head>
    <title>test</title>
    <meta charset=UTF-8 />
    <style type="text/css">
*
margin:0;
padding:0;

        .menu
    width: 100%;
    height: 50px;
    background: #efefef;
    z-index: 999;

.menu .nav
    position: relative;
    width: 100%;
    height: 50px;

.menu .nav li
    float: left;
    font-size: 18px;
    width: 140px;

.menu .nav li a
    float: left;
    display: block;
    height: 50px;
    padding: 0 30px;
    line-height: 50px;
    color: #333;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: 0.5s ease;
    -webkit-transition: 0.5s ease;

.menu .nav li a:hover,.menu .nav li a.current
    background: #8ecb8d;
    color: #fff;

.menu .nav li .box
    width: 100%;
    height: 35px;
    position: absolute;
    top: 50px;
    background-color: rgba(0, 0, 0, 0.4) !important;
    background-color: rgb(0,0,0);
    filter: Alpha(opacity = 40);
    display: none;
    font-size: 16px;
    z-index: 999;

.menu .nav li .box a
    display: block;
    height: 35px;
    color: #fff;
    line-height: 35px;
    border: none;
    background: none;
    padding: 0;
    width: 114px;
    text-align: center;

.menu .nav li .box a:hover
    text-decoration: underline;
    color: #8ecb8d;

ul
    list-style: none;

.logo
width: 200px;
    height: 80px;
    text-align: center;
    line-height: 80px;
    font: bolder 10px;
    color: #fd3;
background-color:blue;


    </style>
</head>

<body>
    <div class="logo">北大青鸟</div>
    <div class="menu">
        <ul class="nav">
            <li><a href="#">网站首页</a>
            </li>
            <li><a href="#">概况介绍</a>
                <div class="box"> <a href="#">院系简介</a>  <a href="#">机构设置</a>  <a href="#">现任领导</a>
                </div>
            </li>
            <li><a href="#">党建工作</a>
                <div class="box"> <a href="#">支部设置</a>  <a href="#">党员教育</a>  <a href="#">书记信箱</a>  <a href="#">荣誉奖励</a>
                </div>
            </li>
            <li><a href="#">教学工作</a>
                <div class="box"> <a href="#">专业设置</a>  <a href="#">师资队伍</a>  <a href="#">实习基地</a>  <a href="#">教学成果</a>
                </div>
            </li>
            <li><a href="#">教学资源</a>
                <div class="box"> <a href="#">教材专著</a>  <a href="#">重点课程</a>  <a href="#">主干课程</a>
                </div>
            </li>
            <li><a href="#">科研工作</a>
                <div class="box"> <a href="#">科研课题</a>  <a href="#">科研论文</a>  <a href="#">科研条件</a>
                </div>
                <li><a href="#">招生就业</a>
                    <div class="box"> <a href="#">招生情况</a>  <a href="#">就业概况</a>  <a href="#">就业信息</a>
                    </div>
                    <li><a href="#">联系交流</a>
                        <div class="box"> <a href="#">合作交流</a>  <a href="#">系友通讯</a>  <a href="#">对外服务</a>
                        </div>
                    </li>
        </ul>
    </div>
</body>

</html>

div+css 我是一个div里带了两个div，两个并列的。但是现在的左边是正常的，右边就是不上去不知道为啥？

宽度没有超过最外面的div的宽度。想知道都有什么情况会出现这种状况？请教各位。。

代码：

#middle

float:left;

width:100%;

padding-top:10px;

min-height:680px;

#left

float: left;

width: 209px;

border:#cccccc 1px solid;

#right

width:750px;

float:right;

border:#000000 1px solid;

参考技术A 你看下是不是#middle 的宽度小于#left+#right 的宽度
如果小于的话，right就会被挤下来，如果你用%来定义宽度的话应该就没问题了

可以加个属性：overflow:hidden
在#middle容器里 #left，#right 下边清楚下样式<div style="clear:both;height:0px;font-size:0px;"></div> 参考技术B 把#right样式改成这个
#right
width:750px;
float:left;
border:#000000 1px solid;

让左右两个div的浮动都设为float:left 参考技术C IE6有双边距BUG.还有border也要算进去.你盒子模型还不是很明白.多钻研一下.~追问

我没用ie6，用的火狐做看的也这样。。border算进去了

追答

你是左右还是左中右啊.我看上面CSS里是三个层.你图片上是两个层. 适当的把那层宽缩小试试.不行加上背景色看一下.IE6下出这种的话加上display:inline

追问

左右。三个一个是最外面的两个是里面并列的。。层宽远小于最外面的

追答

细心一点.检查一下代码.

我写的与你的差不多的.没错的

sfsfsfsf
sasdffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffsfsfsf

本回答被提问者采纳参考技术D 看你的html什么样子的追问

html

overflow: -moz-scrollbars-vertical;

margin: 0;

padding: 0;

追答

.....我是说页面html 代码啊、、看看是怎么布局的、、、、你把页面所有代码都贴出来吧、、如果你就一个div里面嵌套这左右两个div的话是不能出现那样的情况的

追问