在加载所有数据之前,包装器不会展开

时间:2012-09-22 16:35:58

标签: css

在此图像上,我标记为红色#container1及其子容器#container2。 #container2有三个用蓝色标记的列div。

由于外部应用程序的加载延迟(addThis,Facebook,Adsense),我在两个容器未扩展的时刻拍摄了这张快照。之后,两个容器都按预期扩展。无论如何,我总是在#container2扩展之前看到图片(col2)和col1显示。 (延迟的一小部分,但它存在)

Descriptive Sample

#container1{
text-align:center;
width:926px; 
padding:15px; margin-left:12px; 
margin-bottom:10px; 
border:thin solid #999; 
-moz-border-radius:20px;
-webkit-border-radius:20px;
border-radius:20px;
box-shadow: inset 0 0 15px #CCC;
-moz-box-shadow: inset 0 0 15px #CCC;
-webkit-box-shadow: inset 0 0 15px #CCC; 
min-heigt:950px
}



#container2 {
width: 980px;
text-align:left; /* reset text alignment */ 
margin:0 auto; 
position:relative; 
background-color:white;
border: thin solid #999;/*#69c7e8;*/
border-top:none;
box-shadow: 0px 5px 8px #CCC, -5px 5px 8px #CCC, 5px 5px 8px #CCC;
-moz-box-shadow: 0px 5px 8px #CCC, -5px 5px 8px #CCC, 5px 5px 8px #CCC;
-webkit-box-shadow: 0px 5px 8px #CCC, -5px 5px 8px #CCC, 5px 5px 8px #CCC;
min-height:1000px;
}

#col_1{
float:left;
width:200px; 
margin-left:0;
text-align:left; 
}

#col_2{
float:left; 
width:566px;
text-align:left;  
}

#col_3{
float:right;
width:160px; 
margin-right:0;
text-align:left; }

正如您在图片中看到的那样#container1会立即扩展到其最小高度值,而#container2则不会。 无论如何,我不喜欢这个使用min-height的补丁。

是否可以在显示内容的同时展开两个容器?<​​/ p>

0 个答案:

没有答案