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（如您的情况），这基本上扩展了元素以显示所有内容。