扩展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的内容

回答

相关问题