今天记录的是css布局的一些经验。
对于三个div同行显示的问题，在网页的制作中有很多的应用。比如圆角矩形的导航效果。和一些网站的内页等都需要三个div同行显示。
例如今天做的这个效果↓↓↓↓↓↓↓↓
左右两边都是一张图片，中间是文字或者其他元素。类似这样的效果，基本上都可以归属于三个div同行显示的问题。
那么，如何让三个div同行显示呢？方法很简单，就是让三个div 都左浮动，同时设置三个div的长度。这样就可以达到。三个div同时显示的效果。
代码如下如下
<style type="text/css">
.left{ float:left;
20%;
height:100px;}
.center{float:left;
60%;
height:100px;}
.right{float:left;
20%;
height:100px;}
</style>
....... <div class="left">左侧显示的东西</div>
<div class="center">中间显示的东西</div>
<div class="right">右侧显示的东西</div>
为了辨认效果，可以在css里给div加一个背景颜色；
这样就达到了最终效果。。。
如果只使用做浮动，不加上width，那么三个div就会重叠在一起。
如果使用做浮动和右侧浮动，那么在IE浏览器中，第三个div就会跑到第二行。
所以这个方法是我测试过的比较好的方法。。。。。