当浏览器窗口变小时，怎么使横排四个div变成纵向排列啊？？？？？？？

源文件如下： 
<html> <head> 
<meta http-equiv="content-type" content="text/html; charset=gb2312"> <style> 
.line { 
position:relative; 
margin:10px 10%; 
width:80%; 
font-size:20px; 
} 
.cell { 
position:fixed; 
top:0px; 
left:0px; 
width:200px; 
border:1px fluid #000; 
background-color:#ddd; 
color:#555; 
} 
</style> 
</head> <body> <div class="line"> 
<div class="cell"> By Zach Spear Customers won't 
</div> 
<div class="cell" style="left: 210px;"> United Nations 
</div> 
<div class="cell" style="left: 420px;"> MIAMI (Reuters) - 
</div> 
<div class="cell" style="left: 630px;"> By Gabriel Madway - 
product line-up ... </div> 
</div> </body> </html> 
怎么改啊，谢谢了

解决方案 »

  1.   


    <html> <head>
    <meta http-equiv="content-type" content="text/html; charset=gb2312"><style>
    .line {
    position:relative;
    margin:10px 10%;
    width:80%;
    font-size:20px;
    }
    .cell {
    top:0px;
    float:left;
    width:200px;
    margin-right:5px;
    margin-bottom:5px;
    border:1px fluid #000;
    background-color:#ddd;
    color:#555;
    }
    </style>
    </head> <body><div class="line">
    <div class="cell"> By Zach Spear Customers won't
    </div>
    <div class="cell"> United Nations
    </div>
    <div class="cell"> MIAMI (Reuters) -
    </div>
    <div class="cell"> By Gabriel Madway -
    product line-up ... </div>
    </div></body> </html> 
      

  2.   

    谢谢楼上的兄弟，差不多了
    但是一打开怎么中间两个div重叠一起了啊
      

  3.   

    那是因为你的.line类的长度太小
    已经有一个div(第四个)被挤到第二排了
    并且你cell类的div的高度不固定,第一个div比第二个高,也即第一个的旁边没有被完全填充(实在想不到词),第四个便被排到了第一个的后面也即第二个的下面
    如果你四个div的高度一样,第四个被挤到第二排后就会在第一个的下面了