为了账号安全,请及时绑定邮箱和手机立即绑定

div不是块元素吗?为什么在这里两个button元素跟他排成一行?

div不是块元素吗?为什么在这里两个button元素跟他排成一行?

<!DOCTYPE html>

<html>


<head>

    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

    <title></title>

    <style>

    div {

        width: 500px;

        height: 50px;

        padding: 5px;

        margin: 5px;

        float: left;

        border: 1px solid #ccc;

    }

    

    .left {

        background: #bbffaa;

    }

    

    .right {

        background: yellow;

        display: none;

    }

    </style>

    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>

</head>


<body>

    <h2>通过toggle切换显示与隐藏</h2>

    <div class="left">显示到隐藏</div>

    <div class="right">隐藏到显示</div>

    <button>直接show-hide动画</button>

    <button>直接hide-show动画</button>

    <script type="text/javascript">

    $("button:first").click(function() {

        $(".left").toggle(3000)

    });

    </script>


    <script type="text/javascript">

    $("button:last").click(function() {

        $(".right").toggle(3000)

    });

    </script>


</body>


</html>


正在回答

2 回答

因为div被设置了向左浮动(float:left)的属性,body又没设宽度,所以后面的button会浮动在div后面成一行

0 回复 有任何疑惑可以回复我~
#1

慕粉3673019 提问者

非常感谢!
2016-11-04 回复 有任何疑惑可以回复我~

 div浮动之后 脱离了文档流,下一个块级元素上移,直到遇到上一个元素

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

div不是块元素吗?为什么在这里两个button元素跟他排成一行?

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信