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;
}