三栏布局

最新推荐文章于 2018-08-03 15:22:55 发布

weixin_34007906

最新推荐文章于 2018-08-03 15:22:55 发布

阅读量73

点赞数

文章标签： xhtml python

原文链接：https://my.oschina.net/markyun/blog/160649

版权

2019独角兽企业重金招聘Python工程师标准>>>

<!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>
<style type="text/css">
* { margin:0; padding:0; }
#main { position:absolute; left:200px; right:200px }/*绝对定位，使content不占据html文档流空间，让后面的left,right浮上去*/
#left, #right { width:200px; }
#left { float:left; }
#right { float:right; }
</style>
</head>
<body>
<div id="main">
<p style="height:999px; background:yellow; ">content</p>
</div>
<div id="left">
<p style="height:999px; background:red;">left</p>
</div>
<div id="right">
<p style="height:999px; background:blue;">right</p>
</div>
</body>
</html>html>

HTML文档流必须从Main开始然后才是两侧

文档流：文档流是文档中可显示对象在排列时所占用的位置。将窗体自上而下分成一行行，并在每行中按从左至右的挨次排放元素。

网页中大部分对象默认是占用文档流，也有一些对象是不占文档流的，比如表单中隐藏域。

当然我们也可以让占用文档流的元素转换成不占文档流，这就要用到CSS中属性position来控制。

有三种状况将使得元素离开文档流而存在，分别是浮动、绝对定位、固定定位。然则在IE中浮动元素也存在于文档流中。

浮动元素不占任何正常文档流空间，而浮动元素的定位照样基于正常的文档流，然后从文档流中抽出并且能够尽量远的挪动至左侧或者右侧。

文字内容会环绕在浮动元素四周。当一个元素从正常文档流中抽出后，依然在文档流中的其他元素将疏忽该元素并填补他原先的空间。

——————

核心问题是Html文档流必须从Main开始然后才是两侧，下面就是这个要求的Html结构

1 <div id=”main”> 2 </div> 3 <div id=”left”> 4 </div> 5 <div id=”right”> 6 </div>

常规做法把两侧放在主要内容的前面进行左右浮动，然后中间使用边距，这样有个缺点就是网速慢的时候主要内容却在最后显示。

按照上面的Html布局，如果按常规把left和right各自左右浮动，中间main使用边距的话就会出现下面这种情况：

一、使用绝对定位。

不占用文档流的先读

绝对定位需要设置左右边距（实际应用中往往需要在外面套一个相对定位的盒子）。

转载于:https://my.oschina.net/markyun/blog/160649

weixin_34007906

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
三栏布局

2019独角兽企业重金招聘Python工程师标准>>> ...
复制链接

扫一扫