DIV布局之三行三列之高度自适应补遗

最新推荐文章于 2021-07-03 13:50:03 发布

飘零雾雨

最新推荐文章于 2021-07-03 13:50:03 发布

阅读量849

点赞数

分类专栏： CSS 文章标签： div xhtml class float html css

本文链接：https://blog.csdn.net/storm0/article/details/1805944

版权

CSS 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

很显然，上篇文章只是在理想范畴内做了三行三列的三列自适应高。对于一般的站点，那样布局设计其实也就可以了，但如果针对的是门户，或者PV超过百万，千万。。。的网站，这样的布局就显得捉襟见肘了。

也就是说，在网络环境不变的情况下，我们唯有想办法通过良性的布局和程序来提高页面的执行浏览速度。

［演示地址：http://www.doyoe.com/model/xhtmlcss/layout/5.htm］

CSS部分：

body {
margin: 0;
font-size: 12px;
font-family: Verdana, Arial;
text-align: center;
}
div {
overflow: hidden;
text-align: left;
}
p,h1,h3 {
margin: 0;
}
#dyhead,#dyfoot {
width: 777px;
margin: auto;
background-color: #bbb;
}
#dymid {
width: 777px;
margin: auto;
background-color: #D2C6D2;
}
.dyleft {
width: 627px;
}
.dyleft-1 {
background-color: #FE0000;
}
.dyleft-2 {
width: 477px;
background-color: #eee;
}
.dyleft,.dyleft-1 {
float: left;
}
.dyleft-2,.dyright {
float: right;
}
.dyleft-1,.dyright {
width: 140px;
background-color: #E7DFD3;
}
.dyleft,.dyleft-1,.dyleft-2,.dyright {
padding-bottom: 32767px!important;
margin-bottom: -32767px!important;
}
#dyfoot {
clear: both;
}

XHTML部分：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="Author" content="飘零雾雨|edzmaster@gmail.com" />
<title>DY CSS Layout 三行三列之高度自适应(noscript && 普通模式)</title>
</head>
<body>
<div id="dyhead">
<h1>Head</h1>
</div>
<div id="dymid">
<div class="dyleft">
    <div class="dyleft-2">
      <h3>Center</h3>
      <p>centerpart<br />centerpart<br />centerpart<br />centerpart</p>
    </div>
    <div class="dyleft-1">
      <h3>Left</h3>
      <p>leftpart<br />leftpart</p>
    </div>
</div>
<div class="dyright">
    <h3>Right</h3>
    <p>rightpart</p>
</div>
</div>
<div id="dyfoot">
<h1>Footer</h1>
</div>
</body>
</html>