执行“最小边界”用于流体布局 [英] Enforce a "min-margin" for a fluid layout

问题描述

我尝试建立一个在相当高分辨率下效果最好的网站， m甚至不确定在这里复制什么代码，所以链接是：

projects.thomasrandolph.info

我需要的是 #page 停止向左滑动 #logo 加几个像素。

我已将<$ c $的左边距设置为 c> #page 到 13.25em ，看起来是正确的，但在更高的分辨率下，页面看起来很奇怪，因为它不居中。

因此，我希望左侧不会比这更远：

我会VASTLY喜欢如果我可以用纯CSS对这两个元素我在这里注意到，但我可以添加HTML的必要。

我已经很长时间以来，如何解决这个问题，所以请问我的问题，或编辑这个问题，以提高清晰度的问题。

更新： h1>

以下是目前如何查看两个分辨率的图片：

1920 < h2>

1280

下面是应该如何查看 1540 下方的分辨率的图片：

任何高于〜 1540 的分辨率都会按照目前的顺序向右滑动。

解决方案

我要做的是在 #page 上添加一个包装。这不是我想在一个完美的世界，但我想在一个完美的世界中（或至少 margin：min（）） min-margin ）！

在包装器上，我应用了 margin：0 13.25em; 13.25em 是我想要 #page 停止向左滑动的位置。两边相等的边距留下 #page 居中，而没有向右移动 13.25em 。因为我使用边距而不是填充，右边可以溢出浏览器，而不会导致水平滚动条出现。

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

I'm trying to build a site that works best at fairly high resolutions, but also slides as far left as possible when the resolution gets lower.

I'm not even sure what code to copy in here, so the link is:

projects.thomasrandolph.info

What I need is for the left side of #page to stop sliding left at the right side of #logo plus a few pixels. It's 13.25em from the left of the page.

I've set the left margin of #page to 13.25em, which looks correct, but at higher resolutions, the page looks strange because it's not centered. I want to retain the centering but also stop it sliding at a certain point.

So I want the left side to go no farther left than this:

I would VASTLY prefer If I could do this with pure CSS on the two elements I've noted here, but I can add HTML as necessary.

I've been struggling for a long time with how to even ASK this question, so please ask me questions, or edit this question to improve the clarity of the question.

Update:

Here are images of how it currently looks at two resolutions:

1920

1280

Here's an image of how it should look at resolutions below approximately 1540:

Any resolution higher than ~1540 would slide smoothly to the right, as it currently does.

解决方案

What I wound up doing was adding a wrapper around #page. It's not what I would want in a perfect world, but I would want min-margin in a perfect world (or at least margin: min())!

On the wrapper, I applied margin: 0 13.25em; where the 13.25em was where I wanted #page to stop sliding left. The equal margins on both sides leave #page centered without a 13.25em shift to the right. Because I used margins instead of padding, the right side can overflow the browser without causing the horizontal scrollbar to appear.

It seems to be a good fix. I had originally been looking for something more "clever" without adding HTML, but this was simple enough and seems effective enough that it appears to be well worth the extra markup.

这篇关于执行“最小边界”用于流体布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！