微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

html – 为流畅的布局强制实施“最小边距”

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

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

projects.thomasrandolph.info

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

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

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

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

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

更新:

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

1920

1280

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

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

解决方法

我最后做的是在#page周围添加一个包装器.这不是我想要的完美世界,但我希望在一个完美的世界(或者至少是边缘:min())中获得最小边距!

在包装器上,我应用了保证金:0 13.25em; 13.25em是我想要#page停止向左滑动的地方.两侧的相等边距使#page居中而没有向右移动13.25em.因为我使用边距而不是填充,右侧可以溢出浏览器而不会导致水平滚动条出现.

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐