使用CSS強制包裝浮動div div

Question

我正在使用OpenLayers映射。 OpenLayers在網頁上繪製地圖，並具有在這些地圖上放置UI控件的機制。它的一個控件是Panel控件，它包含一些按鈕控件。

Panel控件呈現爲一個div，其中有一堆子div - 每個按鈕一個。 Panel控件和所有按鈕控件的外觀都使用CSS進行配置。我的問題是如何編寫CSS來獲得我想要的。 （請注意，我不能更改呈現的html，而不會在OpenLayers源代碼中進行黑客攻擊，我寧願避免這種攻擊。）

所以我彙集了一些我需要使用的html樣本，here

我希望按鈕從左到右水平放置在地圖的右上角。我可以用float：right和position：absolute來做到這一點。

我希望按鈕佈置在多行上。如果我添加一個寬度：面板，子按鈕divs將包裝。但我不想要溢出包裝，我想包裝在特定的按鈕之間。而我不知道如何在CSS中做到這一點。

例如，如果你拿我的例子，我可以通過改變寬度來讓它把第一個五個按鈕放在第一行，最後兩個放在第二行。但是，假設我想把前三個按鈕放在第一行，最後四個放在第二行。如果我設置寬度以便在第三個按鈕之後包裝按鈕，我會在第三行獲得第七個按鈕，這是我不想要的。

使用設置寬度和自動換行定位子按鈕總是在每行上放置相同數量的子按鈕，最後一行可能很短。這不是我需要的。

考慮一下，我可以在每個按鈕上使用position：absolute，但是開始看起來非常單調乏味。任何人有一個更簡單的方法？

Answer 1

如果你可以改變特定元素的CSS，你可以只設置clear: right：

<div id='contents'> 
    <div id='panel'> 
     <div id='button1'>1</div> 
     <div id='button2'>2</div> 
     <div id='button3'>3</div> 
     <div id='button4' style='clear: right'>4</div> 
     <div id='button5'>5</div> 
     <div id='button6'>6</div> 
     <div id='button7'>7</div> 
    </div> 
</div> 

你可以替換地插入按鈕之間的清除元件：

<div id='contents'> 
    <div id='panel'> 
     <div id='button1'>1</div> 
     <div id='button2'>2</div> 
     <div id='button3'>3</div> 
     <br style='clear: right' /> 
     <div id='button4'>4</div> 
     <div id='button5'>5</div> 
     <div id='button6'>6</div> 
     <div id='button7'>7</div> 
    </div> 
</div>