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,但这很简单并且看起来很有效,看起来非常值得额外的标记.

相关文章

vue阻止冒泡事件 阻止点击事件的执行 <div @click=&a...
尝试过使用网友说的API接口获取 找到的都是失效了 暂时就使用...
后台我拿的数据是这样的格式: [ {id:1 , parentId: 0, name:...
JAVA下载文件防重复点击,防止多次下载请求,Cookie方式快速简...
Mip是什么意思以及作用有哪些