避免箱子溢出到下面的箱子

如何解决避免箱子溢出到下面的箱子

| 在中间行下方的给定HTML标记中，粉红色框溢出到其下方的灰色框。如何确定灰色框始终保持吹粉红色框的状态。另外，这里是html页面的链接：http://pastehtml.com/view/axc3iain8.html

<html>
    <head>
        <title>Page 3</title>

        <style type=\"text/css\">
            body {
                width: 1000px;
                margin-left: auto;
                margin-right: auto;
            }

            #header {
                height: 200px;
                margin: 2px;
                margin-bottom: 10px;
                font-family: Arial,Helvetica,sans-serif;
                font-size: XX-large;
                background: gray;
            }

            .snip_list {
                min-height: 100px;
                margin: 25px auto;
            }

            .snippet {
                width: 323px;
                float: left;
                margin: 5px;
                font-size: small;
                background: lightpink;
                display: inline;
            }

            #para_middle {
                margin-top: 10px;
                background: gray;
            }
        </style>
    </head>

    <body>
        <div id=\"header\">
            <p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,sed do eiusmod tempor</p>
        </div>

        <div class=\"snip_list\">
            <div class=\"snippet\">
                <p>Lorem ipsum dolor sit amet,sed do eiusmod tempor
                Lorem ipsum dolor sit amet,sed do eiusmod tempor</p>
            </div>

            <div class=\"snippet\">
                <p>Lorem ipsum dolor sit amet,sed do eiusmod tempor</p>
            </div>
        </div>

        <div id=\"para_middle\" class=\"para\">
            <p>Lorem ipsum dolor sit amet,sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud
                exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
                irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
                pariatur. Excepteur sint occaecat cupidatat non proident,sunt in culpa qui officia
                deserunt mollit anim id est laborum.</p>
        </div>

        <div class=\"snip_list\">
            <div class=\"snippet\">
                <p>Lorem ipsum dolor sit amet,sed do eiusmod tempor</p>
            </div>
        </div>
    </body>
</html>

解决方法

你可以给

overflow:hidden

到div.snip-list。它应将保持边缘的容器保持在原位。 , 只需将以下内容添加到.snip_list clear:both; 我已经在这里为您编码-http://jsfiddle.net/ajthomascouk/EPzWE/ , 在ѭ5上添加ѭ4可以解决此问题。清除将确保元素不会在浮动元素上重叠。清除左侧将确保左侧边缘没有浮动元素。清除右将检查右，清除两个将同时检查左和右。 , 问题在于您的ѭ6是浮动的，因此不在正常流动范围内。您需要使后续元素elements7ѭ。实现此目的的一种好方法是使用CSS在环境元素之后添加一个不可见的清除块：

.snip_list:after { content: \".\"; visibility: hidden; display: block; clear: both; }

, 在每个“行”之后加上ѭ9 要么：

.fix {
    clear:left;
    height:1px;
    margin:-1px 0 0;
    overflow:hidden;
}

<div class=\"fix\"></div>

避免箱子溢出到下面的箱子

如何解决避免箱子溢出到下面的箱子

解决方法

相关推荐