`
axl234
  • 浏览: 262418 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

绝对定位与等高布局

    博客分类：
  • css
CSSXHTMLHTML 
阅读更多

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>绝对定位与等高布局</title>
<link rel="stylesheet" href="../css/demo.css" type="text/css" />
<link rel="stylesheet" href="../css/hl.css" type="text/css" />
<style>
.out_box{width:66%; margin:0 auto; border:1px solid #ccc; background-color:#f5f5f5; overflow:hidden; position:relative;}
.left_box{width:25%; float:left; position:relative; background:#0C9}
.equal_height{width:100%; height:999em; position:absolute; left:0; top:0;background-color:#fff; border-right:1px solid #f00; background:#FF6}
.left_con{padding:1em; position:relative; z-index:1; background:#36F}

.right_box{width:74.6%; float:right;}
.right_con{padding:1em;}
.out_box img{display:block;}
.btn_box{width:66%; margin:1em auto 3em;}
</style>
</head>

<body>
 <div class="out_box">
               
                 <div class="left_box">
                     <div class="equal_height"></div>
                        <div id="leftCon" class="left_con">
                         <img src="e.jpg" />
                        </div>
                            <div id="leftCon" class="left_con">
                         <img src="e.jpg" />
                        </div>
                            <div id="leftCon" class="left_con">
                         <img src="e.jpg" />
                        </div>
                             <div id="leftCon" class="left_con">
                         <img src="e.jpg" />
                        </div>
                             <div id="leftCon" class="left_con">
                         <img src="e.jpg" />
                        </div>
                    </div>
                   
                    <div class="right_box">
                     <div id="rightCon" class="right_con">
                         <img id="rightImage" src="180.jpg" />
                        </div>
                        <div id="rightCon" class="right_con">
                         <img id="rightImage" src="180.jpg" />
                        </div>
                        <div id="rightCon" class="right_con">
                         <img id="rightImage" src="180.jpg" />
                        </div>
                        <div id="rightCon" class="right_con">
                         <img id="rightImage" src="180.jpg" />
                        </div>
                       
                    </div>
                    <div style="clear:both"></div>
                </div>
               
               
                <div class="btn_box">
                 <button id="btnLeftSide">左侧栏高度增加</button>
                    <button id="btnRightSide">右侧栏高度增加</button>
                </div>

</body>
</html>

分享到：
| clip:rect下sprite图片定位和png通道透明
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics