css - div 不断脱离父级

Question

好的，所以我正在使用下面的 css，但 #profile_side 一直从 #wrap_p 中掉出来？我究竟做错了什么？我试着用谷歌搜索它...

         #wrap_p{


            border-style: solid;
        }
        #profile_side{
            width: 20%;
            float: right;
            padding: 10px;
            border-style:dashed;
            border-color: gray;
        }
        #profile_main{
            width: 70%;

            padding:10px;
            border-style:dashed;
            border-color: gray;
        }

这是html：

    <div id="wrap_p">
    <div id="profile_side">
    <img src="/img.png" width="100%"/>
            <big>username</big>
            <p>user information</p>
    </div>
    <div id="profile_main">
            main user stuff
    </div>
    </div>

Answer 1

解决方案：添加overflow: hidden;到#wrap_p

检查这个演示：http: //jsfiddle.net/WsHAT/1/

overflow: hidden用于告诉浏览器隐藏任何超出元素大小的内容。但要使其工作，元素必须具有指定的高度值。

对于没有指定高度的元素或height: auto（如您的情况），这基本上扩展了元素以显示所有内容。