请教css浮动布局的鄙视题-问题

Mr_HeXS 2016-05-09 12:00:58

一个面试题（要做成图中的样子）
div都是浮动成形成
但是图中标号为2 的div高度不同
这样会产生下边的div也跟着不同高度
3和4同高度
要求：用css如何解决，不能再加一个大的div包住他们

...全文

157 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

空城丶孤人 2016-05-14

打赏
举报

引用 3 楼 wpruner 的回复:

主要是用到清楚浮动的方法，注意这里的清除浮动不是清除自己的浮动，而是清除对它有影响的那个元素的浮动例外给第一个div加个display：inline-block；也是可以的；

clear:both 有什么作用我能问一下吗

屋昂仼 2016-05-10

打赏
举报

关于图中2不等高的问题，可以做成和1等高进行浮动，然后用内边距padding（注意height）实现2的高度即可

wpruner 2016-05-09

打赏
举报

主要是用到清楚浮动的方法，注意这里的清除浮动不是清除自己的浮动，而是清除对它有影响的那个元素的浮动
例外给第一个div加个display：inline-block；也是可以的；

___紫菜 2016-05-09

打赏
举报

<!DOCTYPE html>
<html>
<head>
    <style>
        .one {
            border: 2px black solid;
            width:100px;height:200px;
            float:left;
        }

        .two {
            border: 2px black solid;
             width:100px;height:150px;
             float:left;
             margin-left:10px;
        }

        .three {
            border: 2px black solid;
             width:150px;height:150px;
             clear:both;
             float:left;
        }

        .four {
            border: 2px black solid;
             width:80px;height:150px;
              float:left;
               margin-left:10px;
        }
    </style>
</head>
<body>
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="four"></div>
</body>
</html>