关于HTML和CSS中左右布局中的浮动问题

最新推荐文章于 2024-06-26 21:59:24 发布

纯心物语

最新推荐文章于 2024-06-26 21:59:24 发布

阅读量2.2k

点赞数

本文链接：https://blog.csdn.net/fanxiaokun526/article/details/45745617

版权



这是预想中要写的界面，可是我做的界面出来总是这个样子，
右面设置了float-right了，图片按自己所想的是悬浮在右面了，可是就是不能跟左边的并排啊。按自己想的，不应该出现这样的布局，于是自己就尝试各种方法，是不是1.宽度不够被挤下来了，待我查了审计元素后，不是宽度不够的原因。2.是不是自己写的布局没有包括在banner中，事实证明也没有。3.我不会靠加个margin-top 来让它上去吧。4.是不是左边的布局哪里写的不对，影响右边了，虽然现在左边的布局看起来是正确的。于是就回去查左边布局的代码，能影响右边的，肯定是左边的浮动，于是查看float-left写的位置，试着改了一下，成功了。原来的float-left写在了li里，现在改成左边的全部浮动。终于实现了自己想要的界面。

代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>新浪轻应用</title>
    <link rel="stylesheet" href="css/reset.css" type="text/css">
    <style type="text/css">
        .wrapper{
            width: 940px;
            height: auto;
            margin: 0 auto;
        }
        .homeBanner{
            width: 100%;
            height: 270px;
            border: solid 1px #cccccc;
        }
        .hBLeft{
            float:left
            width: 138px;
            height: 270px;
            border-right: solid 1px #cccccc;
        }
        .hBLeft ul li{
            height: 44px;
            line-height: 44px;
            font-size: 14px;
            color: #666666;
        }
        .hBLeft ul li a.borderNone{
            border: none;
        }
        .hBLeft ul li a{
            font-weight: bold;
            letter-spacing: 1px;
            color: #808080;;
            display: block;
            margin: auto;
            width: 100px;
            height: 44px;
            text-align: right;
            border-top: solid 1px #cccccc;
            background: url("images/homeIcon01.png") no-repeat;
        }
        .hBLeft ul li a.bLListIcon02{
            background-position: 0 -45px;
        }
        .hBLeft ul li a.bLListIcon03{
            background-position: 0 -89px;
        }
        .hBLeft ul li a.bLListIcon04{
            background-position: 0 -134px;
        }
        .hBLeft ul li a.bLListIcon05{
            background-position: 0 -179px;
        }
        .hBLeft ul li a.bLListIcon06{
            background-position: 0 -224px;
        }
        .hBLeft ul li a:hover,.hBLeft ul li a.hover{
            color: #09d;
        }
        .hBRight{
            float: right;
            width: 801px;
            height: 270px;
            position: relative;
        }
        .hBRightImgs li{
            position: absolute;
            top: 0; left: 0;
            z-index: 1;
        }
        .hBRightImgs li.zIndex2{
            z-index: 2;
        }
        .hBRightImgs li.zIndex3{
            z-index: 3;
        }
        .hBRightImgs li.zIndex4{
            z-index: 4;
        }
</head>
<body>
     <div class="wrapper">
         <div class="homeBanner">
             <div class="hBLeft">
                 <ul>
                     <li class="hover"><a href="#" class="borderNone">语言培训</a></li>
                     <li><a href="#" class="bLListIcon02">职业技能</a></li>
                     <li><a href="#" class="bLListIcon03">学历教育</a></li>
                     <li><a href="#" class="bLListIcon04">IT&金融</a></li>
                     <li><a href="#" class="bLListIcon05">兴趣爱好</a></li>
                     <li><a href="#" class="bLListIcon06">医疗健康</a></li>
                 </ul>
             </div>
             <div class="hBRight">
                 <ul class="hBRightImgs">
                     <li><img src="images/hBImgs01.jpg"></li>
                     <li class="zIndex2"><img src="images/hBImgs01.jpg"></li>
                     <li class="zIndex3"><img src="images/hBImgs01.jpg"></li>
                     <li class="zIndex4"><img src="images/hBImgs01.jpg"></li>
                 </ul>
             </div>
         </div>
     </div>
</body>
</html>