其他分享
首页 > 其他分享> > CSS解決等寬等高問題

CSS解決等寬等高問題

作者：互联网

前段時間為了解決前端佈局問題，研究了不少，最終搞定。以下是幾種方法。
第一种（两边宽度百分比）：

ContractedBlock.gifExpandedBlockStart.gifView Code 
<!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>
<title>三列自适应等高且中列宽度自适应</title>
<style type="text/css">
body{ background:url(http://bbs.blueidea.com/attachment.php?aid=162970&k=8a588529fdf6c7cf15d202d23dfba661&t=1304927794&noupdate=yes); }
*{ margin:0; padding:0;}
.iefix_main{float:right; font-size:0; position:relative;}
.wrapper{overflow:hidden;}
.shadow_l{width:10%;float:left; background:url(http://bbs.blueidea.com/attachment.php?aid=162380&k=983ba7d17320e4c3401cac8722cfed70&t=1304927794&noupdate=yes) repeat-y right;}
.shadow_r{width:10%;float:right; background:url(http://bbs.blueidea.com/attachment.php?aid=162381&k=02b10b1f06bcb79d22e71bf1468f79fe&t=1304927794&noupdate=yes) repeat-y left;}
.main{background:#fff; _float:left;/* ie6 hack*/  overflow:hidden;}
.autoheightfix{margin-bottom:-10000px;padding-bottom:10000px;}
</style>
</head>
<body>
<div class="wrapper">
<div class="shadow_l autoheightfix">&nbsp;</div>
<div class="shadow_r autoheightfix">&nbsp;</div>
<div class="main autoheightfix">Center<br />
Center<br />
Center<br />
Center<br />
Center<br />
Center<br />
Center<br />
Center<br />
Center<br />
Center<br />
Center<br />
Center<br />
Center<br />
Center<br />
Center<br />
Center<br />
Center<br />
Center<br />
Center<br />
Center<br />
Center0<br />
<span class="iefix_main">&nbsp;</span> <!--for ie6（当然也可for ie7)-->
</div>
</div>
</body>
</html>




第二种（中间百分比）：




ContractedBlock.gifExpandedBlockStart.gifView Code 


<!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">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<head>
<title>三列自适应等高且中列宽度自适应</title>
<style type="text/css">
body{ background:url(http://bbs.blueidea.com/attachment.php?aid=162970&k=8a588529fdf6c7cf15d202d23dfba661&t=1304927794&noupdate=yes); }
*{ margin:0; padding:0;}
.iefix_main{float:right; font-size:0; position:relative;}
.wrapper{overflow:hidden; width:80%; margin:0 auto;}
.shadow_l{width:15px;float:left; background:url(http://bbs.blueidea.com/attachment.php?aid=162380&k=983ba7d17320e4c3401cac8722cfed70&t=1304927794&noupdate=yes) repeat-y left;}
.shadow_r{width:15px;float:right; background:url(http://bbs.blueidea.com/attachment.php?aid=162381&k=02b10b1f06bcb79d22e71bf1468f79fe&t=1304927794&noupdate=yes) repeat-y right;}
.main{background:#fff; _float:left; overflow:hidden;}
.autoheightfix{margin-bottom:-10000px;padding-bottom:10000px;}
</style>
<body>
<div class="wrapper">
<div class="shadow_l autoheightfix">&nbsp;</div>
<div class="shadow_r autoheightfix">&nbsp;</div>
<div class="main autoheightfix">Center<br />
Center<br />
Center<br />
Center<br />
Center<br />
Center<br />
Center<br />
Center<br />
Center<br />
Center<br />
Center<br />
Center<br />
Center<br />
Center<br />
Center<br />
Center<br />
Center<br />
Center<br />
Center<br />
Center<br />
Center0<br />
<span class="iefix_main">&nbsp;</span> <!--for ie6（当然也可for ie7)-->
</div>
</div>
</body>
</html>




第三種(div嵌套模式)

ContractedBlock.gifExpandedBlockStart.gifView Code 


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{margin:0;padding:0;}
body{background:url(http://bbs.blueidea.com/attachment.php?aid=162970&k=e046eec9c0fd552333d3f20aa4da545c&t=1305009100&nothumb=yes) repeat 0 0;}
.main{width:80%;margin:0 auto;*position:relative;*left:7px;}
.main .content{background:#CDFEBC;}
.main .left{background:url(http://bbs.blueidea.com/attachment.php?aid=162380&k=94f0ce1168340d77454085413483885a&t=1305009100&nothumb=yes) repeat-y 0 0;left:-7px;position:relative;width:100%;padding-left:7px;}
.main .right{background:url(http://bbs.blueidea.com/attachment.php?aid=162381&k=b6548aad1d26c1f6530cb4a2ffee23a1&t=1305009100&nothumb=yes) repeat-y 100% 0;width:100%;padding-right:7px;}
</style>
</head>
<body>
<div class="main">
<div class="left">
<div class="right">
<div class="content">
<p>主内容区域</p>
<p>主内容区域</p>
<p>主内容区域</p>
<p>主内容区域</p>
<p>主内容区域</p>
<p>主内容区域</p>
</div> 
</div>
</div>
</div>
</body>
</html>




转载于:https://www.cnblogs.com/public/archive/2011/05/15/2047072.html
 

标签：問題,http,blueidea,解決,background,yes,com,CSS,left	

来源： https://blog.csdn.net/weixin_34355881/article/details/93744106