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會摺疊。有沒有更好的辦法？

回答

相關問題