gpt4 book ai didi

html - 为流体布局强制执行 "min-margin"

转载 作者:太空狗 更新时间:2023-10-29 13:44:53 24 4
gpt4 key购买 nike

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

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

projects.thomasrandolph.info

我需要的是 #page 的左侧在 #logo 的右侧停止向左滑动加上几个像素。它距离页面左侧 13.25em

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

所以我希望左边不比这更靠左:

left alignment

如果我可以在我在这里提到的两个元素上使用纯 CSS 来做到这一点,我会非常喜欢,但我可以根据需要添加 HTML。

我已经为如何提出这个问题苦苦挣扎了很长时间,所以请问我问题,或者编辑这个问题以提高问题的清晰度。

更新:

以下是它当前在两种分辨率下的表现:

1920

1920 res

1280

1280 res

这是一张图片,说明它应该如何查看低于大约 1540 的分辨率:

min left margin

任何高于 ~1540 的分辨率都会像目前一样平滑地向右滑动。

最佳答案

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

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

这似乎是一个很好的修复。我最初一直在寻找不添加 HTML 的更“聪明”的东西,但这足够简单并且看起来足够有效,看起来非常值得额外的标记。

关于html - 为流体布局强制执行 "min-margin",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6513067/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com