日期:2014-05-16  浏览次数:20373 次

js div一个小问题,请各路大侠指教,谢啊
上代码先
  <div id="k">
  <div id="k1">
  </div>
  <div id="k2">
  </div>
  <div id="k3">
  </div>
  </div>
然后css是这么写
#k
{
  width:500px;
  height:300px;
  background-color:Gray;
}
#k1
{
  float:left;
  width:100px;
  height:50px;
  background-color:Green;
}
#k2
{
  float:left;
  width:120px;
  height:80px;
  background-color:Yellow;
}
#k3
{
  float:none;
  width:80px;
  height:60px;
  background-color:red;
}

界面效果如下:


我希望达到的效果是
红色的k3块在绿色和黄色的k1,k2块之下显示,就是下一行显示,而不是贴在绿色快背后,这个css要怎么写了

多谢大家指教

------解决方案--------------------
#k
{
width:500px;
height:300px;
background-color:Gray;
}
#k1
{
float:left;
width:100px;
height:50px;
background-color:Green;
position:relative;
z-index:2;
}
#k2
{
float:left;
width:120px;
height:80px;
background-color:Yellow;
position:relative;
z-index:2;
}
#k3
{
float:none;
width:80px;
height:60px;
background-color:red;
position:relative;
left:-220px;
z-index:1;
}
我只会用定位做了 呵呵 你再等等高人吧 哈
------解决方案--------------------
#k3 { clear: both; }