Question

我无法实现的是：如果你按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;
}

可扩展的div及其内容

2 个答案: