三个div同行显示

    今天记录的是css布局的一些经验。

    对于三个div同行显示的问题，在网页的制作中有很多的应用。比如圆角矩形的导航效果。和一些网站的内页等都需要三个div同行显示。

例如今天做的这个效果↓↓↓↓↓↓↓↓

    左右两边都是一张图片，中间是文字或者其他元素。类似这样的效果，基本上都可以归属于三个div同行显示的问题。

    那么，如何让三个div同行显示呢？方法很简单，就是让三个div 都左浮动，同时设置三个div的长度。这样就可以达到。三个div同时显示的效果。

代码如下如下

    <style type="text/css">

   .left{ float:left;

   width:20%; 

height:100px;}

   .center{float:left;

   width:60%;

height:100px;}

   .right{float:left;

   width:20%;

height:100px;}

    </style>

....... <div class="left">左侧显示的东西</div>

<div class="center">中间显示的东西</div>

<div class="right">右侧显示的东西</div>

    为了辨认效果，可以在css里给div加一个背景颜色；

这样就达到了最终效果。。。

如果只使用做浮动，不加上width，那么三个div就会重叠在一起。

如果使用做浮动和右侧浮动，那么在IE浏览器中，第三个div就会跑到第二行。

所以这个方法是我测试过的比较好的方法。。。。。