CSS：定位儿童时，包装div会折叠。有没有更好的办法？

我想解决我们的内部应用程序的确定/取消按钮位置。
我们希望确定和取消按钮始终放置（和样式）。CSS：定位儿童时，包装div会折叠。有没有更好的办法？

我的想法是简单地将我们的按钮放在按钮包装器中，然后将它们放置在与该包装器的关系中。

问题来了，但是，当我用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;这样做的最好方法吗？
如果是这样，确保我的按钮不会悬垂在其他对象上的优雅方式是什么？

（注：我以为大约只是分配一个固定高度的包装，但在灵活的全部似乎也在该解决方案需要允许任何大小的按钮。）

来源

2013-01-16 mOrloff

** OMG ** _ !!! _我不敢相信我没有想过使用两个漂浮物！嘿嘿，我想到了漂移的权利或左，但不是两个:) _ **感谢所有快速答案**＃ – mOrloff

position: absolute是不是真的意味着以此目的。

您真正需要的这里是.cancel一个float:left和float:right上.proceed

一旦你做到这一点，但是，你仍然有高度的.button，包装为0的同样的问题。这是clear:both进来的地方。

在两个浮动元素之后您将需要一个clear:both。

1）添加一个新的div .proceed和.cancel后：<div class="clear"></div>与下面的CSS：您可以通过以下两种方式之一添加它

.clear { 
    clear: both; 
}

2）您可以使用：伪选择后在.button，包装，添加明确仅适用于CSS：

.button-wrapper:after { 

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

}

编辑：这里是一个的jsfiddle说明选项2：http://jsfiddle.net/P5gj4/

来源

2013-01-16 15:36:00

到目前为止，有三个正确的答案。我选择这一个，因为它是回应完整性和敏捷性的最佳平衡点。由于-A-一堆。 – mOrloff

尝试使用浮动。您需要“清除”阻止该换行浮动，例如使用overflow:hidden。有很多关于漂浮物和清理你可以阅读的文章。

http://jsfiddle.net/89NUZ/

.button-wrapper{ 
    overflow:hidden; 
} 
.button-wrapper .proceed{ 
    float:left; 
} 
.button-wrapper .cancel{ 
    float:right; 
}

来源

2013-01-16 15:37:12 antejan

谢谢。我自己也错过了这一点，脸红了一点。非常感谢您的回复。 – mOrloff

试图把它们用浮漂，而不是使用position属性定位。

事情是这样的，也许：

section.blah { 
    border: 1px solid #DDD; 
    margin: 2em; 
    padding: 1.5em 1em; 
} 
.button-wrapper{ 
    overflow: hidden; 
} 
.button-wrapper .proceed{ 
    float: right; 
} 
.button-wrapper .cancel{ 
    float: left; 
}

http://jsfiddle.net/4CpaW/

我设置溢出隐藏父清除浮动。

来源

2013-01-16 15:37:27 lingonhatt

CSS：定位儿童时，包装div会折叠。有没有更好的办法？

回答

相关问题