CSS:定位子项时包装器 div 折叠。有没有更好的办法？

Question

我正在尝试解决我们内部应用程序的确定/取消按钮放置问题。
我们希望“确定”和“取消”按钮的位置(和样式)保持一致。

我的想法只是将我们的按钮放在一个按钮包装器中，然后将它们放置在与该包装器相关的位置。

但是，问题来了，当我用 position: absolute; 拨动按钮时，包装器如何折叠到 0 高度。
由于这个折叠的 div，我的按钮最终悬空了。

例子:

/*** css ***/
section.blah{
    border: 1px solid #DDD;
    margin: 2em;
    padding: 1.5em 1em;
}
.button-wrapper{ 
    position:relative;
}
.button-wrapper .proceed{
    position:absolute;
    right:0;
}
.button-wrapper .cancel{
    position:absolute;
    left:0;
}

/*** html ***/
<section class="blah">
    <div class="button-wrapper">
        <button class="btn proceed">OK</button>
        <button class="btn cancel">Cancel</button>
    </div>
</section>

如您所见，我们只是希望“确定”类型的按钮位于一侧，而“取消”类型的按钮位于另一侧。
position:absolute; 是最好的方法吗？
如果是这样，确保我的按钮不会悬卡在其他对象上的优雅方法是什么？

(注意:我想过只为包装器分配一个固定的高度，但这似乎太不灵活了。解决方案需要允许任何尺寸的按钮。)

Answer 1

position: absolute并不是真正用于此目的。

这里您真正需要的是 float:left关于 .cancel 和 float:right在.proceed

但是，一旦执行此操作，您仍然会遇到相同的问题，即 .button-wrapper 上的高度为 0。这是clear:both的地方进来了。

您需要一个 clear:both在两个 float 元素之后。您可以通过以下两种方式之一添加它:

1) 在.proceed 和.cancel 之后添加一个新的div:<div class="clear"></div>使用以下 CSS:

.clear {
  clear: both;
}

2) 您可以在 .button-wrapper 上使用 :after 伪选择器，仅使用 CSS 添加清除:

.button-wrapper:after {

  content: '.';
  display: block;
  clear:both;
  visibility:hidden;
  height:0;

}

编辑:这是说明选项 2 的 JSFiddle:http://jsfiddle.net/P5gj4/