当前位置: 代码迷 >> Web前端 >> 两列等高、3列等高
  详细解决方案

两列等高、3列等高

热度:109   发布时间:2012-11-23 00:03:43.0
两列等高、三列等高
<div class="qgroup_main">
<div class="qgroup_main_inner">
  <div class="qgroup_main_left"><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>
  <div class="qgroup_main_right"><br /><br /><br /><br /><br /><br /><br /><br /></div>
  <div class="qgroup_main_mid"><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>
  </div>
</div>
<div class="qgroup_main_bot">
  <div class="qgroup_main_left_bot"></div>
  <div class="qgroup_main_right_bot"></div>
  <div class="qgroup_main_mid_bot"></div>
</div>

?

css代码

.qgroup_main{ position:relative;}
.qgroup_main_inner{overflow:hidden; zoom:1; padding-bottom:10px;}
.qgroup_main_left{float:left; width:180px; margin-bottom:-30000px;padding-bottom:30000px; background:#ccc; border:1px solid #f00;}
.qgroup_main_right{float:right;width:170px; margin-bottom:-30000px;padding-bottom:30000px; background:#ccc; border:1px solid #f00;}
.qgroup_main_mid{ margin:0 175px 0 185px; margin-bottom:-30000px;padding-bottom:30000px;  background:#ccc; border:1px solid #f00;}

.qgroup_main_left_bot{font-size:0;line-height:0;height:1px;background:#f00; overflow:hidden;float:left; width:182px;}
.qgroup_main_right_bot{font-size:0;line-height:0;height:1px;background:#f00; overflow:hidden;float:right;width:172px; }
.qgroup_main_mid_bot{font-size:0;line-height:0;height:1px;background:#f00; overflow:hidden;margin:0 175px 0 185px;_margin:0 172px 0 182px;}
?

?

?

  相关解决方案