Question

在中间行下面的给定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, consectetur adipisicing elit, sed do eiusmod tempor
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</p>
            </div>

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

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

        <div id="para_middle" class="para">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 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, consectetur adipisicing elit, sed do eiusmod tempor</p>
            </div>

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

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

Answer 1

你可以给予

overflow:hidden

到div.snip-list。它应该保持容器保持边缘。

Answer 2

简单地将以下内容添加到.snip_list

clear:both;

我在这里为你编写了代码 - http://jsfiddle.net/ajthomascouk/EPzWE/

Answer 3

向clear:both添加#para_middle将解决此问题。 Clear将确保元素在浮动元素上不重叠。向左清除将确保左边缘没有浮动元素。清除权限将检查正确，清除两者将检查左右。

Answer 4

问题是你的snippet是浮动的，因此它们超出正常流量。您需要创建后续元素clear。实现这一目标的一个好方法是在环境元素之后使用CSS添加一个不可见的清除块：

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

Answer 5

在每个“行”之后添加<br clear="left" />

或：

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

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

避免将盒子溢出到下面的盒子里

5 个答案: