Question

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

一个Panel控件呈现为div，其中包含一堆子div - 每个按钮一个。 Panel控件和所有按钮控件的外观都使用CSS配置。我的问题是如何编写CSS来获得我想要的东西。（注意，我不能在不破解OpenLayers源码的情况下更改渲染的html，我宁愿避免使用它。）

所以我整理了一份我需要使用的html样本，here

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

我希望按钮布局在多行上。如果我向面板添加宽度：子按钮div将换行。但我不想要过流包装，我想在特定按钮之间进行包装。我无法弄清楚如何在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>

使用CSS强制包装浮动div

1 个答案: