如何获得div浮动下方的按钮元素？

时间：2012-12-22 10:57:00

标签： css

如何在div下方获得＆＃34;运行＆＃34; 按钮？

enter image description here

以下是代码：http://jsbin.com/ehurit/10/edit

下面复制粘贴相同的代码。

<!DOCTYPE html>
<html>
<head>
  <style>
  div.boxes { background:yellow; border:1px solid #AAA; width:80px; height:80px; margin:0 5px; float:left; }
  div.colored { background:green; }
  .clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
} 
  </style>
</head>
<body>
  <div class="boxes"></div>
  <div class="boxes" id="mover"></div>
  <div class="boxes"></div>     
  <button class="clearfix" id="run" >Run</button>
</body>
</html>

2 个答案:

答案 0 :(得分：3)

在display: block CSS类

中尝试clear: both和.clearfix

Demo

更新：我刚刚再次检查过你应该在你的浮动div周围设置clearfix：http://jsfiddle.net/dC7GL/1/

答案 1 :(得分：3)

改变你的风格

.clearfix {
      clear:both;
}

然后在按钮上方添加div标签并应用清除修复样式，它会将按钮按下方框下方

  <div class="clearfix"></div>
  <button id="run" >Run</button>
相关问题
最新问题