Question

我知道显而易见的解决方案是将banner和main包装在一个浮动容器中，但是有任何其他方法可以将sidebar“碰撞”到顶部，因为下面的HTML？

http://html-bin.appspot.com/aghodG1sLWJpbnIMCxIEUGFnZRjJ0wYM

<!DOCTYPE html>
<head>
    <meta charset="utf-8" />
    <title>Floats</title>
    <style>

        #banner {
            width: 70%;
            float: left;
            padding: 10px;
            border: 1px solid blue;
        }

        #main {
            width: 70%;
            float: left;
            padding: 10px;
            border: 1px solid orange;
        }

        #sidebar {
            width: 25%;
            float: right;
            padding: 10px;
            border: 1px solid green;
        }

    </style>
</head>
<body>

    <div id="banner">
        Banner
    </div>

    <div id="main">
        Main
    </div>

    <div id="sidebar">
        Sidebar
    </div>

</body>
</html>

Answer 1

#sidebar {
    border: 1px solid green;
    display: inline-block;
    .display: inline;
    .zoom:1;
    padding: 10px;
    width: 22%;
}

向右漂浮而不清除之前的浮子

1 个答案: