渲染定位的div与浮动div一起

Question

的CSS :::::

.box {
    float: left;
    width: 40%;
}
button {
    position: absolute; 
}

HTML体:::

<div>
        <div class="box" id="leftBox">
            <!--contains a header and jquery tree -->
        </div>
        <div class="box" id="rightBox">
          <!--contains a header and jquery tree-->
        </div>
    </div>
    <div>
        <button style="display:block;"> Run Test </button>
    </div>

呈现为,,,

为什么定位按钮位于浮动物体的顶部？按钮的isn＆divt元素是否应该将其移动到下一行？ 如何移动按钮到下一行而不是右边？

Answer 1

我已经为你做了这个：

http://jsfiddle.net/lharby/qft2bLdx/

有点hacky。

我从按钮中删除了position：absolute并添加了

 clear:both;

更好的选择是将clearfix类添加到包含两个box类元素的包装器中。

参考：http://css-tricks.com/snippets/css/clear-fix/

所以最好的结果是：

<强> HTML

<div class="clearfix">
    <div class="box" id="leftBox">
        <!--contains a header and jquery tree -->
        Start Tests
    </div>
    <div class="box" id="rightBox">
      <!--contains a header and jquery tree-->
        Start Tests
    </div>
</div>
<div>
    <button> Run Test </button>
</div>

添加CSS

.clearfix:after {
 visibility: hidden;
 display: block;
 font-size: 0;
 content: " ";
 clear: both;
 height: 0;
 }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

Answer 2

<div id="buttonDiv">
    <button style="display:block;"> Run Test </button>
</div>

CSS：

buttonDiv {
    position:relative;
    display:block;
    text-align:left;
}
button {
    position:relative; /* or just delete the rule */
}