css div液态/自动调整大小

Question

我想让容器高度自动调整，如果内容溢出，它只会进入流程。

这是我的代码。网站：Here

只是忘了HTML和专注于CSS只有CSS是我得到错误。

.game_wrapper { 
    width:210px; 
    height:auto; 
    position:relative; 
    background:#fafafa; 
    background:url(bg1.png); 
    border:1px dashed #7f7f7f; 
    padding:3px; 
} 

.game_container { 
    width:90px; 
    height:85px; 
    border:1px solid #fff; 
    float:left; 
    margin:3px; 
    text-align:center; 
    -moz-box-shadow: 0px 0px 1px #000000; 
    -webkit-box-shadow: 0px 0px 1px #000000; 
    box-shadow: 0px 0px 1px #000000; 
    border-radius:1px; 
    padding:3px; 
    transition: all .2s; 
    -webkit-transition: all .2s; 
    -moz-transition: all .2s; 
    -o-transition: all .2s; 
    position:relative; 
    background:url(background.jpg); 
    background-size:100%; 
} 

.game_container:hover { 
    border:1px solid #c0c0c0; 
} 

.game_container img { 
    width:100%; 
    height:70px; 
    -webkit-filter: brightness(110%); 
    padding-bottom:3px; 
    border-bottom:1px solid #afafaf; 
    transition: all .2s; 
    -webkit-transition: all .2s; 
    -moz-transition: all .2s; 
    -o-transition: all .2s; 
    background:url(bg2.png); 
} 

.game_container:hover img { 
    -webkit-filter: brightness(120%); 
} 

.game_container .name { 
    font-size:10px; 
    color:#0f5f5f; 
    background:url(bg1.png); 
} 

.game_container:hover .name { 
    color:#949400; 
    font-size:12px; 
} 

.game_container a:link, .game_container a:visited { 
    text-decoration:none; 
} 

.game_container .info { 
    box-shadow: inset 0 1px 2px rgba(0,0,0,.07); 
    border:1px solid #a0a0a0; 
    text-align:justify; 
    background:#01a2ff; 
    border-color: #ddd; 
    position:absolute; 
    font-family:Verdana,Geneva,sans-serif; 
    font-size:12px; 
    color:#E0F7FC; 
    height:120px; 
    display:none; 
    padding:10px; 
    width:220px; 
    left:110%; 
    top:0px; 
    z-index:1; 
} 

.game_container .info:before { 
    content:''; 
    position:absolute; 
    left:-6px; 
    top:15px; 
    z-index:2; 
    border-bottom:1px solid #a0a0a0; 
    border-left:1px solid #a0a0a0; 
    box-shadow-bottom: inset 0 1px 2px rgba(0,0,0,.07); 
    box-shadow-left: inset 0 1px 2px rgba(0,0,0,.07); 
    background:#01a2ff; 
    height:10px; 
    width:10px; 
    display:block; 
    transform: rotate(45deg); 
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
} 

.game_container:hover .info { 
    display:block; 
} 

.game_container .info:hover { 
    transition: all 0s; 
    -webkit-transition: all 0s; 
    -moz-transition: all 0s; 
    -o-transition: all 0s; 
    display:none; 
} 

.game_container .title { 
    font-size:14px; 
    color:#E0F7FC; 
} 

.game_container .description { 
    margin-top:5px; 
    color:#F2F9FE; 
    font-family:Arial; 
    font-size:10px; 
} 

Answer 1

Your Example Fixed

需要clearfix到主包装

.clearfix:before, .clearfix:after { content:""; display:table; } 
.clearfix:after { clear:both; } 

/* IE 6/7 */ 
.clearfix{ zoom:1; } 

添加类.clearfix的主包装

<div class="clearfix game_wrapper"> 

更多abouts clearfix http://www.sitepoint.com/clearing-floats-overview-different-clearfix-methods/

Answer 2

DEMO

只需添加overflow:auto;到.game-wrapper

.game_wrapper { 
    width:210px; 
    height:auto; 
    position:relative; 
    background:#fafafa; 
    background:url(bg1.png); 
    border:1px dashed #7f7f7f; 
    padding:3px; 
    overflow:auto; 
}