使用 CSS 强制包装浮动 div

Question

我正在使用 OpenLayers 映射。 OpenLayers 在网页上绘制地图，并具有在这些地图上放置 UI 控件的机制。它的控件之一是 Panel 控件，其中包含一些按钮控件。

Panel 控件呈现为一个 div，其中包含一堆子 div - 每个按钮一个。 Panel 控件和所有按钮控件的外观均使用 CSS 进行配置。我的问题是如何编写 CSS 来获得我想要的。 （注意，如果不修改 OpenLayers 源代码，我就无法更改呈现的 html，我宁愿避免这样做。）

所以我整理了一个我需要使用的 html 示例，here

我希望按钮水平布局，从左到右，在地图的右上角。我可以用 float:right 和 position:absolute 做到这一点。

我希望将按钮布置在多行上。如果我在面板中添加一个 width:，子按钮 div 将换行。但我不想溢出包装，我想在特定按钮之间进行包装。而且我不知道如何在 css 中做到这一点。

例如，如果您以我的示例为例，我可以通过更改宽度使其将前五个按钮放在第一行，最后两个放在第二行。但是假设我想把前三个按钮放在第一行，最后四个放在第二行。如果我设置宽度以便按钮在第三个之后包裹，我会在第三行获得第七个按钮，这是我不想要的。

使用 set-width 和自动换行来定位子按钮总是在每一行放置相同数量的子按钮，最后一行可能很短。这不是我需要的。

考虑一下，我可以在每个按钮上使用 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>