0

包装容器 css 是 width:auto; 最大高度：70%；

我希望 div 在浏览器窗口高度发生变化时保持其纵横比。

jfiddle：http: //jsfiddle.net/7JNuU/

HTML

<div id="feedwrapper">

<!--FULL group-->
<div id="tile">
<div id="fullcell">1</div>
</div>
<!--FULL group-->

<!--4up group-->
<div id="tile">
<div id="solocell">1</div>
<div id="solocell">2</div>
<div id="solocell">3</div>
<div id="solocell">4</div>
</div>
<!--4up group-->

<!--2top group-->
<div id="tile">
<div id="solocell">1</div>
<div id="solocell">2</div>
<div id="cell2xbot">3</div>
</div>
<!--2top group-->

CSS

#feedwrapper{
width:auto;
max-height:70%;
top:80px;
bottom:60px;
margin-bottom:80px;
left:300px;
position:absolute;
background-color:#FFF;
white-space:nowrap;
display:block;
}
#tile{ position:relative; border:none; padding:0px; min-width:640px; height:100%; margin:0px 2px 2px 0px; background-color:#CC6; float:left;}

#fullcell{width:100%; height:100%; background-color:#F99; display:block;}
#solocell{ width:50%; height:50%; background-color:#36C; display:block; float:left;}
#cell2xbot{ width:100%; height:50%; background-color:#C93; display:block; float:left;}
#cell2xtop{ width:100%; height:50%; background-color:#C66; display:block; float:left;}
#cell2yleft{ width:50%; height:100%; background-color:#99C; display:block; float:left;}
#cell2yright{ width:50%; height:100%; background-color:#FC6; display:block; float:right;}

我正在处理的页面是： http ://www.jordache.com/connect.php

网格使用正方形和矩形。50%x50% 正方形、100% 正方形、50%x/100%y 矩形和 100%x/50%y 矩形。

必须有一个更简单的方法.... grrrrr ...帮助！

4

0 回答 0