Nerparkey
Arial Swploit
2020-04-17 10:08
采纳率: 55.2%
浏览 668

HTML+CSS设置div .main_right中的float:left无效

<!DOCTYPE html>
<html style="background-image: url(./img/bg.png);">
    <head>
        <meta charset="utf-8" />
        <title>This is my first</title>
        <style>
            * {
                margin: 0;
                font-family: "微软雅黑";
                transition:0.5s;
                -webkit-font-smoothing: antialiased;
            }
            .header {
                width: 100%;
                height: 70px;
                background-color: white;
                position: fixed;
                top: 0;
                box-shadow:3px 1px 2px darkgrey;
            }
            .header:hover {
                box-shadow:3px 1px 2px #000;
            }
            .header a {
                line-height: 70px;
                margin: 85px;
                color: black;
                text-decoration: none;
                padding: 15px;
                font-size: 16px;
                text-shadow: 0 1px 1px #fff;
            }
            .header a:hover {
                background-color: black;
                color: white;
            }
            .left {
                width: 5px;
                height: 700px;
                background-color: #A9A9A9;
                position: fixed;
                left: 0;
                overflow: auto;
                text-align: center;
            }
            .left:hover {
                background-color: white;
                width: 200px;
                box-shadow:3px 1px 2px darkgrey;
                border-top-width: 1px;
                border-top-style: solid;
                border-top-color: aqua;
            }
            .left a {
                color: #A9A9A9;
                text-decoration: none;
            }
            .main_left {
                margin: 80px;
                background-color: white;
                width: 70%;
                height: 700px;
                border-top-width: 1px;
                border-top-style: solid;
                border-top-color: aqua;
                border-bottom-width: 1px;
                border-bottom-style: solid;
                border-bottom-color: aqua;
            }
            .main_left:hover {
                box-shadow:3px 1px 2px darkgrey;
            }
            .main_right {
                background-color: white;
                height: 200px;
                width: 20%;
                float: left;
            }
        </style>
    </head>
    <body>
        <div class="header">
            <a href="#">主页</a>
            <a href="#">博客中心</a>
            <a href="#">下载中心</a>
            <a href="#">教程大全</a>
            <a href="#">登录</a>
        </div>
        <div class="left">
            <a href="#">HTML5</a>
            <p></p>
            <a href="#">CSS</a>
            <p></p>
            <a href="#">JavaScript</a>
            <p></p>
            <a href="#">Vue.js</a>
            <p></p>
            <a href="#">Node.js</a>
            <p></p>
            <a href="#">Ajax</a>
            <p></p>
            <a href="#">Django</a>
            <p></p>
            <a href="#">PHP</a>
            <p></p>
            <a href="#" >Flash</a>
            <p></p>
            <a href="#">ASP</a>
            <p></p>
            <a href="#">ASP.NET</a>
            <p></p>
            <a href="#">.NET</a>
            <p></p>
            <a href="#">JSP</a>
            <p></p>
            <a href="#">Perl</a>
            <p></p>
            <a href="#">JQuery</a>
            <p></p>
            <a href="#">react</a>
            <p></p>
            <a href="#">bootstrap</a>
            <p></p>
            <a href="#">StringBoot</a>
            <p></p>
            <a href="#">router</a>
            <p></p>
            <a href="#">DVA</a>
            <p></p>
            <a href="#">数据库</a>
            <p></p>
            <a href="#">C#</a>
            <p></p>
            <a href="#">Java</a>
            <p></p>
            <a href="#">C++</a>
            <p></p>
            <a href="#">C</a>
            <p></p>
            <a href="#">Go</a>
            <p></p>
            <a href="#">Python</a>
        </div>
        <div class="main_left">

        </div>
        <div class="main_right">

        </div>
    </body>
</html>

图片说明
运行之后就是这样,
float: left;设置无效,将width调整过,无效
求解

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • zyszyk
    z_ys 2020-04-17 11:51
    已采纳

    是左下角那个div不能左浮吗?看你的代码,你前面一个大的div没有设置float:left 那么后面一个
    div你设置float:left也不能放在大div的旁边,必须要前一个左浮,后一个才能谈左右浮,因为每一个div
    都是默认占一整行

    可以啊,大div设置左浮就可以了看我的(复制的你的代码,只不过背景改为了红色):
    图片说明

    点赞 评论

相关推荐