Html 为流体布局强制执行“最小边距”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6513067/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Enforce a "min-margin" for a fluid layout
提问by rockerest
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:
我什至不确定要在这里复制什么代码，所以链接是：
What I need is for the left side of #pageto stop sliding left at the right side of #logoplus a few pixels. It's 13.25emfrom the left of the page.
我需要的是左侧#page停止向左滑动#logo加上几个像素的右侧。它13.25em位于页面左侧。
I've set the left margin of #pageto 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.
我已经设置了#pageto的左边距13.25em，看起来是正确的，但是在更高的分辨率下，页面看起来很奇怪，因为它没有居中。我想保持居中，但也想阻止它在某个点滑动。
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.
我非常喜欢如果我可以在我在这里提到的两个元素上使用纯 CSS 来做到这一点，但我可以根据需要添加 HTML。
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 currentlylooks at two resolutions:
以下是它目前在两种分辨率下的外观图像：
1920
1920年
1280
1280
Here's an image of how it shouldlook at resolutions below approximately 1540:
这是它应该如何查看以下分辨率的图像1540：
Any resolution higher than ~1540would slide smoothly to the right, as it currently does.
任何高于 ~ 的分辨率1540都会平滑地向右滑动，就像现在一样。
采纳答案by rockerest
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-marginin a perfect world (or at least margin: min())!
我最后做的是在#page. 这不是我想要的完美世界，但我想要min-margin完美世界（或至少margin: min()）！
On the wrapper, I applied margin: 0 13.25em;where the 13.25emwas where I wanted #pageto stop sliding left. The equal margins on both sides leave #pagecentered without a 13.25emshift to the right. Because I used margins instead of padding, the right side can overflow the browser without causing the horizontal scrollbar to appear.
在包装纸上，我应用margin: 0 13.25em;了13.25em我想#page停止向左滑动的位置。两边的等边距#page居中，没有13.25em向右移动。因为我使用了边距而不是填充，右侧可以溢出浏览器而不会导致出现水平滚动条。
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.
这似乎是一个很好的修复。我最初一直在寻找不添加 HTML 的更“聪明”的东西，但这已经足够简单，而且似乎足够有效，似乎值得额外的标记。
回答by Stechi
If you don't use a border for the element you can use it to define a "min-margin".
如果您不为元素使用边框，则可以使用它来定义“最小边距”。
.center
{
margin: 0px auto;
border: transparent solid 30px;
}
P.S. I know this is an old question, but the OP also commented this month.
PS 我知道这是一个老问题，但 OP 本月也发表了评论。
回答by Tural Ali
Give exact width and height to class center. then set position to absolute: lets say we wanna set width:400px; and height:300px; try following piece of code for center
为班级中心提供准确的宽度和高度。然后将位置设置为绝对：假设我们要设置宽度：400px；和高度：300px；尝试以下代码为中心
.center
{
postion:absolute;
width:400px;
height:300px;
top:50%;
left:50%;
margin-top:-200px;
margin-left:-150px;
}
