三栏式布局中的tips

来源：互联网发布：mac插上电池没有充电编辑：程序博客网时间：2024/06/08 19:51

虽然是一个很简单的题目，但是由于自己布局定位没有学好，简单的页面做了几个小时，但是也是有收获的，下面我来分析一下我在做页面时遇到的问题以及收获。

首先：三栏式布局最好不要用css表格，因为框框太多，容易糊涂
三栏式布局
一、绝对定位法：左右两栏采用绝对定位，分别固定于页面的左右两侧，中间的主体栏用左右margin值撑开距离。于是实现了三栏自适应布局。

首先需要三个div，将左右两边的div的position设置为absolute，左右设置为相等固定宽度，在这里设置为200px，并且左边div的top值为0，left值为0，同理右边top值为0，right值为0。然后设置中间div的样式，将中间div的margin-left和margin-right设置为左右两边的固定宽200px。以下是简单的布局：

<body>    <div id="main"></div>    <div id="left"></div>    <div id="right"></div></body>

下面就是关键的css代码：

<style type="text/css">    #main {margin:0 200px;background:red;}    #left{position:absolute;top:0;left:0;width:200px;background:blue;height:100%;} <br>    #right{position:absolute;top:0;right:0;width:200px;background:green;height:100%;}<br> </style>

这种方式三个div的顺序可以任意改变。

*此方法的优点在于：理解容易，上手简单，受内部元素影响而破坏布局的概率低，就是比较经得起折腾。
缺点在于：如果中间栏含有最小宽度限制，或是含有宽度的内部元素，当浏览器宽度小到一定程度，会发生层重叠的情况。*

二、自身浮动法：左栏左浮动，右栏右浮动，中间栏放最后。

以下是布局代码：

<body>    <div id="left"></div>    <div id="right"></div>    <div id="main"></div></body>

下面是css样式代码：

<style type="text/css">    #main {margin:0 200px;background:red;}    #left{float:left;width:200px;background:blue;height:100%;}    #right{float:right;width:200px;background:green;height:100%;}</style>

这种方式需要注意三个div的顺序，左右两栏的顺序不分先后，但是中间一栏必须放在最后。

*此方法的优点是：代码足够简洁与高效
缺点是：中间主体存在克星，clear:both属性。如果要使用此方法，需避免明显的clear样式。*　　
三、margin负值法：左右两栏均左浮动，左右两栏采用负的margin值。中间栏被宽度为100%的浮动元素包起来。

下面是布局代码：

<body>   <div id="main">       <div class="content"></div>   </div>   <div id="left"></div>   <div id="right"></div></body>

下面是css样式代码：

<style type="text/css">   #main {float:left;width:100%;}   .content {margin:0 200px;height:100%;background:red;}   #left{float:left;width:200px;margin-left:-100%;background:blue;}   #right{float:left;width:200px;margin-left:-200px;background:green;}</style>

左右两栏div的顺序不分先后，但是主体部分div要放前面。

*此方法的优点在于：三栏相互关联，可谓真正意义上的自适应，有一定的抗性——布局不易受内部影响。
缺点在于：相对比较难理解些，上手不容易，代码相对复杂。出现百分比宽度，过多的负值定位，如果出现布局的bug，排查不易。*

Tips:

减少使用id
感到不知所措时不要盲打，想不通时在网上找找对策
如何让同一个div中的图片与文字处于同一行且文字在图片的右边偏上的地方

img{    vertical-align: top;}

top 把元素的顶端与行中最高元素的顶端对齐text-top    把元素的顶端与父元素字体的顶端对齐middle  把此元素放置在父元素的中部。bottom  把元素的顶端与行中最低的元素的顶端对齐。text-bottom 把元素的底端与父元素字体的底端对齐。

vertical-align详情：
http://www.w3school.com.cn/cssref/pr_pos_vertical-align.asp

伪类中的child

#right img:first-child{    padding-top: 0px;}

阅读全文

0 0