为什么蓝色区块到下面去了？不能与橙色区块在同一水平上吗？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <style>
 .div1{
            width: 100px;
 height: 100px;
 background: red;
 float: left;
 }
        .div2{
            width: 300px;
 height: 300px;
 background: blue;
 float: right;
 }
        .div3{
            width: 100px;
 height: 100px;
 background: green;
 float: inherit;
 }
        .div4{
            width: 200px;
 height: 200px;
 background: orange;
 }
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div4"></div>
    <div class="div2">
        <div class="div3"></div>
    </div>
</body>
</html>

高为砚 2017-12-24

源自：Float浮动 2-3 编程练习

收起

1回答

好帮手慕珊回答被采纳获得+3积分 2017-12-25 11:23:38

这个应该是div4的问题，它占了一行，如果把div4挪到div2的下面，蓝色区块就与橙色区块在一行了。祝学习愉快！

收起回答

高为砚提问者 #1

非常感谢！

2017-12-25 11:51:20
码农灬一枚 #2

你听他扯明明是元素给的太宽了界面显示不下自动换行了你调下宽度就知道了

2018-01-15 22:33:39
一叶知秋519 #3

div是块级元素，一个块级元素占一行，和宽度是没有关系的。建议同学根据自己的思路也尝试修改一下。祝学习愉快~

2018-01-16 09:50:10