为流体布局强制实施"最小边距"

Question

我正在尝试构建一个在相当高分辨率下工作效果最好的网站,但在分辨率降低时尽可能向左滑动.

我甚至不确定要在这里复制什么代码,所以链接是:

projects.thomasrandolph.info

我需要的是左侧#page停止向左侧滑动#logo加上几个像素.它13.25em位于页面左侧.

我将左边距设置#page为13.25em,看起来是正确的,但是在更高的分辨率下,页面看起来很奇怪,因为它没有居中.我想保持居中,但也要阻止它在某一点滑动.

所以我希望左侧不要远离这个:

我绝对会更喜欢如果我可以在我在这里注意到的两个元素上用纯CSS做到这一点,但我可以根据需要添加HTML.

我一直在努力解决这个问题,所以请问我问题,或者编辑这个问题以提高问题的清晰度.

更新:

以下是目前两种分辨率的图像:

1920

1280

这是一个关于它应该如何看待大约以下分辨率的图像1540:

任何高于〜的分辨率1540都会平滑地向右滑动,就像现在一样.

Answer 1

我最后做的是添加一个包装纸#page.这不是我想要的完美世界,但我希望min-margin在一个完美的世界(或至少margin: min())!

在包装器上,我应用margin: 0 13.25em;了13.25em我想要#page向左滑动的位置.双方的平等边缘在#page没有13.25em向右移动的情况下居中.因为我使用边距而不是填充,右侧可以溢出浏览器而不会导致水平滚动条出现.

这似乎是一个很好的解决方案.我原本一直在寻找更"聪明"的东西而不添加HTML,但这很简单,看起来很有效,看起来非常值得额外的标记.

Answer 2

如果您不为元素使用边框，则可以使用它来定义“最小边距”。

.center
{
margin: 0px auto;
border: transparent solid 30px;
}

PS 我知道这是一个老问题，但 OP 本月也发表了评论。