html - 可扩展的 div 及其内容

Question

我的代码在 jsfiddle 上

我无法完成的是：如果你按 x 轴缩小屏幕尺寸，我的包含圣诞老人图像的盒子将“掉”出第一个容器下方的容器盒子，这没关系（可以往下走） ，但我也希望包含这些图像的 div 也“伸展”下来。

我敢打赌我在代码的 css 部分中遗漏了一些东西——你能告诉我吗？

Answer 1

每当您浮动某些元素时，这些元素的父级将不会采用实际高度，因此为此您为浮动元素的容器 div 应用一个明确的修复类。

在 CSS 中

.clearfix:after {  
    clear:both; 
    content:"."; 
    display: block;
    height:0; 
    visibility:hidden;
}

.clearfix {display:inline-block;}
* html .clearfix {height:1%;}
.clearfix {display:block;}

在 HTML 中

<div class="clearfix" >    
    <div class="okvir">
        <a href="#"><img src="http://cdn1.iconfinder.com/data/icons/silent_night_icons/128/santa.png" /><br/>CTA 2</a>
    </div>  

    <div class="okvir">
        <a href="#"><img src="http://cdn1.iconfinder.com/data/icons/silent_night_icons/128/santa.png" /><br/>CTA 2</a>
    </div>  

    <div class="okvir">
        <a href="#"><img src="http://cdn1.iconfinder.com/data/icons/silent_night_icons/128/santa.png" /><br/>CTA 2</a>
    </div>                          
</div> 

Answer 2

这是一个仅 css 的解决方案：http: //jsfiddle.net/surendraVsingh/Prjd8/6/

CSS

.accContent{
    background-color: #F5F5F5;
    padding: 5px;
    min-height: 160px;
     border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;

    -moz-border-bottom-right-radius:5px;
    -moz-border-bottom-left-radius:5px;

    -webkit-border-bottom-right-radius:5px;
    -webkit-border-bottom-left-radius:5px;

    -khtml-border-bottom-right-radius:5px;
    -khtml-border-bottom-left-radius:5px;
    overflow:hidden; /* Add This */
}

.okvir{
    width: 210px;
    height: 150px;
    text-align: center;
    background-color: #CCC;
    margin:0 0 20px 20px;/* Modify this to make it look good when resized */
    float: left;
    border-radius: 5px;
}