以最小左边距集中div

Question

我正在建立一个顶部有导航栏的网站。此栏由左上角的徽标和窗口中集中的工具栏组成，如下所示。徽标只是一个img标记，position:absolute将其放在正确的位置，工具栏是一个带width:100%的div，其中的组件集中在其中。

如果窗口调整得太小，或者在平板设备上将设备旋转为纵向，则工具栏会重叠徽标，如下所示：

我希望工具栏在到达徽标时停止移动，所以如果调整窗口大小，它会是这样的：

我确实找到了这个解决方案：

css: how to build centered div with minimum spacing on the left

但问题在于它依赖于知道集中组件（工具栏）的宽度，在这种特殊情况下无法保证。

提前感谢您的帮助！

Answer 1

您需要将徽标和工具栏都设置为{position：relative}。然后，您需要将工具栏设置为：

Quads = {
    love.graphics.newQuad(0, 0, TileW, TileH, tilesetW, tilesetH), -- 1 = grass
    love.graphics.newQuad(32, 0, TileW, TileH, tilesetW, tilesetH), -- 2 = box
    love.graphics.newQuad(0, 32, TileW, TileH, tilesetW, tilesetH), -- 3 = flowers
    love.graphics.newQuad(32, 32, TileW, TileH, tilesetW, tilesetH), -- 4 = box
}

和徽标：

.toolbar {position: relative; float: right;}

调整页面大小时，这应该使它们不会相互重叠。你可能还想研究制作一个汉堡菜单＆＃39;当页面减少超过某一点时。我建议在媒体查询时这样做。

见下面的小提琴

https://jsfiddle.net/dbcv4yc7/

如果你想让你的topbar成为中心，那么你需要将它放入一个占据剩下正确空间的div中。

如：

img {position: relative; float: left}

请参阅下面的小提琴：

https://jsfiddle.net/dbcv4yc7/1/