css布局：三列布局，中间内容优先加载

上周面试前端开发时候，遇到这样的笔试题目，三列布局，中间内容优先加载，左右两边的div宽度都是200px。

我首先想到的是方法是：父级div相对定位，中间的div左右边距都是210px；左右两边的div都绝对定位，分别位于左右两边。

在纸上写完，我当时觉得没啥问题啊，但是面试我的考官却对这样布局能否实现效果表示怀疑,当然他也不确定，可能他用的是其他方法。我回家后，试了一下，确实没问题啊。。解决问题的方法又不是只有一个。。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>三列布局，中间内容优先加载</title>
<style type="text/css">
* { margin:0; padding:0; }
.box { overflow:hidden; zoom:1; background:#ccc; position:relative; margin:0 auto; /* width:960px; 此处加入宽度即可变为固定布局 */ }
.center { background:yellow; margin:0 210px; }
.left, .right { width:200px; position:absolute; top:0; }
.left { background:red; left:0; }
.right { background:blue; right:0; }
</style>
</head>

<body>

<div class="box">
    <div class="center">
      <p>内容</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>内容</p>
      <p>内容</p>
    </div>
    <div class="left">
      <p>left</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>left</p>
      <p>&nbsp;</p>
    </div>
    <div class="right">
        <p>right</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>right</p>
      <p>right</p>
    </div>
</div>

</body>
</html>

二、浮动的方法

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>三列布局，中间内容优先加载</title>
<style type="text/css">
/* ——css reset—— */
body { font:12px/1.5 Arial, Helvetica, sans-serif; }
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td { margin:0; padding:0; }
h1, h2, h3, h4, h5, h6 { font-size:1em; }
address, code, caption, th, cite, dfn, em, var { font-style:normal; }
q:before, q:after { content:""; }
table { border-collapse:collapse; border-spacing:0; }
caption, th { text-align:left; }
ins { text-decoration: none; }
del { text-decoration: line-through; }
fieldset, img { border:none; }
legend { display:none; }
input { vertical-align:middle; }
ol, ul { list-style:none; }
a:link, a:visited { }
a:hover, a:focus, a:active { }
.clearfix:after { content:""; height:0; visibility:hidden; display:block; clear:both; }
.clearfix { zoom:1; }
/*—–page css——*/
.main { margin:0 auto; background:#ddd; /* width:950px 此处加入宽度即可变为固定布局*/ }
.col_main { float:left; width:100%; }
.incol_main { margin:0 210px 0 260px; background:red; /*incol_main内容宽度可自动延展*/}
.col_sub1 { background:yellow; width:250px; float:left; margin-left:-100%; }
.col_sub2 { background:orange; width:200px; float:right; margin-left:-200px; }
</style>
</head>

<body>



<div class="main clearfix">
<div class="col_main">
    <div class="incol_main">incol_main <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
    </div>
</div>
<div class="col_sub1">col_sub1<br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
</div>
<div class="col_sub2">col_sub2<br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
</div>
</div>


</body>
</html>

下面是网上搜的。

html代码：

方法一：利用绝对定位方法(不推荐)

css部分：

body {margin: 0;padding: 0; height: 100%;}
#left,#right {position: absolute; top:0; width: 220px; height: 100%;background:pink;}
#left {left: 0;}
#right { right:0;}
#main {margin: 0 230px; height: 100%;}

这种方法是最简单，也是麻烦最多的，如果中间栏含有最小宽度限制，或是含有宽度的内部元素，当浏览器宽度小到一定程度，会发生层重叠的情况。

方法二：采用的是浮动布局

css部分：

#left,#right { float: left; width: 220px; height: 200px; background: blue;}

#right { float: right;}

#main { margin: 0 230px;background: red; height: 200px;}

这种方法我利用的就是浮动原理，左右定宽度分别进行左浮动和右浮动，此时主内容列（中间列没有定度）主会自动插入到左右两列的中间，最要注意的一点是，中间列一定要放在左右两列的后面

方法三：margin方法

css部分：

#left{ width:200px; float:left;margin-right:-200px; background-color:#FF9900}

#main{ width:auto;background:#00FF00;margin:0 220px;}

#right{ width:200px;margin-left:-200px; float:right; background-color:#CCCC00}

左右设置后，使用margin

方法四：个人感觉最简单方法：

css部分：

#left{ width:200px; float:left;}

#mid{ width:auto;}

#right{ width:200px; float:right;}

中间使用width:auto;左右分别左右浮动

方法五：实现中间栏优先加载（重要部分优先加载）

html部分：

</div>

<div class="extra-2">extra</div>

css部分：

.main-2{ float:left; width:100%;margin-bottom:-3000px; padding-bottom:3000px;background:#F90;}

.main-wrap-2{ margin:0 200px 0 150px; }

.sub-2{ float:left; margin-left:-100%; width:150px; background:#6C0; margin-bottom:-3000px; padding-bottom:3000px;}

.extra-2{ float:left; margin-left:-200px; width:200px; background:#F9F; margin-bottom:-3000px; padding-bottom:3000px;}

优先加载关键在于重要内容在html里面必须在前面，所有main部分移到了最上面

较完整内容可以参考——双飞翼布局：

方法六：中间栏优先加载，采用css3 方法：

[html]<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>自适应宽度，左右两栏固定宽度，中间栏优先加载</title>
<style>
.container{
display:-moz-box;
display:-webkit-box;
}
div{
padding:10px;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
.sider_l{
width:250px;
-moz-box-ordinal-group:1;
-webkit-box-ordinal-group:1;
background:limegreen;
}
.middle_content{
-moz-box-flex:1;
-webkit-box-flex:1;
-moz-box-ordinal-group:2;
-webkit-box-ordinal-group:2;
background:lightpink;
}
.sider_r{
width:250px;
-moz-box-ordinal-group:3;
-webkit-box-ordinal-group:3;
background:green;
}
</style>
</head>

<body>
<div class="container">
<div class="middle_content">优先加载主内容区</div>
      <div class="sider_l">左边栏</div>
<div class="sider_r">右边栏</div>
</div>
</body>
</html>
[/html]

方法七：中间栏优先加载position:absolute方法

posted @ 2013-06-03 20:14 赵小磊阅读(1270) 评论(0) 编辑收藏举报

刷新页面返回顶部

css布局：三列布局，中间内容优先加载

二、浮动的方法

下面是网上搜的。

公告