擴展div的內容

我不能做到的是：如果你通過x軸narow屏幕尺寸，含聖誕老人的形象我的箱子將「落」從容器中第一個容器下方的框，這是可以的（可以下面去），但我也想要包含這些圖像的div「拉伸」下來。

我敢打賭，我在代碼的css部分缺少某些東西 - 請問您能提供建議嗎？

2012-07-20 Nikola

HTTP：// JS fiddle.net/DfLSB/在容器上的最小寬度，他們不會掉出 – 2012-07-20 09:30:21

這裏是僅一個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; 
}

來源

2012-07-20 09:46:17 SVS

我說你的問題是正確的答案，因爲它解決了這個只有兩個變化的CSS文件 - 很好！ – Nikola 2012-07-20 10:42:08

無論何時浮動某些元素，這些元素的父元素將不會取實際高度，因此，您可以爲浮動元素的容器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>

來源

2012-07-20 09:35:07

優秀，謝謝，它現在的作品。 – Nikola 2012-07-20 09:39:24

擴展div的內容

回答

相關問題