1

如何获得div 下方的“运行”按钮？

在此处输入图像描述

这是代码：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>
4

2 回答 2

3

尝试在你的display: blockCSS类中clear: both.clearfix

演示

更新：我刚刚再次检查，您可能应该像这样围绕浮动 div 设置 clearfix：http: //jsfiddle.net/dC7GL/1/

于 2012-12-22T11:00:40.707 回答
3

改变你的风格

.clearfix {
      clear:both;
}

然后在按钮上方添加一个 div 标签并应用 clear fix 样式，它会将按钮向下推到框下方

  <div class="clearfix"></div>
  <button id="run" >Run</button>
于 2012-12-22T11:02:01.443 回答