在 CSS 中使用百分比边距但想要以像素为单位的最小边距？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6350645/
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
Using a percentage margin in CSS but want a minimum margin in pixels?
提问by Brett
I have set a margin: 0 33% 0 0;however I would also like to make sure the margin is at leasta certain pxamount. I know there is no min-marginin CSS so I was wondering if I have any options here?
我已经设置了一个margin: 0 33% 0 0;但是我也想确保保证金至少是一定的px。我知道min-marginCSS 中没有，所以我想知道这里是否有任何选择？
采纳答案by bogatyrjov
Place a divwith a % widthand a static min-widthto the right of your element.
将div带有 %width和静态min-width的a放在元素的右侧。
<div style="position:relative; float:left; margin:0">
<div style="position:relative; float:left; width:33%; min-width:200px">
回答by Clarus Dignus
The true solution here is to use a media query break-point to determine when 33% no longer works for you and should be overridden by the minimum margin in pixels.
这里真正的解决方案是使用媒体查询断点来确定 33% 何时不再适合您，并且应该被以像素为单位的最小边距覆盖。
/*Margin by percentage:*/
div{
margin: 0 33% 0 0;
}
/*Margin by pixel:*/
@media screen and ( max-width: 200px ){
div{
margin: 0 15px 0 0;
}
}
In the above code, change the max-widthto whatever screen width the 33% right margin no longer works for you.
在上面的代码中，将 更改为max-width33% 右边距不再适合您的任何屏幕宽度。
回答by Ever
you can try this
你可以试试这个
.mm:before {
content: "";
display: inline-block;
width: 33%;
min-width: 200px;
}
回答by Andre Duarte
Carl Papworth, in this case, you can use this:
Carl Papworth，在这种情况下，你可以使用这个：
body {margin-left: 60px; margin-right: 60px; width:calc(100%-120px); }
div#container {width:33%;}
回答by GlennFriesen
How about this?
这个怎么样？
body {margin-left: 60px; margin-right: 60px; }
div#container {width:33%;}
回答by Phoenix
if you are using spanthan u have to do like this :
如果您正在使用span，则必须这样做：
span{
display:block;
margin:auto;
}
if you are using divthan u can do this :
如果您正在使用，您div可以这样做：
div{
margin:auto;
}
回答by untill
I've played with a couple of the aforementioned solutions, but in a fluid and truly responsive setting, I believe the best option is to set the proper padding on the respective container/wrapper. Example: Style:
我已经使用了上述几种解决方案，但在流畅且真正响应式的设置中，我相信最好的选择是在相应的容器/包装器上设置适当的填充。示例： 样式：
html {
background-color: #fff;
padding: 0 4em;
}
body {
margin: 0 auto;
max-width: 42em;
background-color: #ddf;
}
Now play around with various window widths, and also try various font sizes.
现在尝试各种窗口宽度，并尝试各种字体大小。
Also try the working demo.
还可以尝试工作演示。
回答by lmigas
You could keep your items in a "container" div and set a padding exact to "min-margin" you'd like to have. It might not be exactly what you're looking for, but it gives you that sense of minimum margin size.
您可以将您的项目保存在“容器”div 中，并将填充设置为您想要的“最小边距”。它可能不是您正在寻找的，但它给了您最小边距大小的感觉。
<div class="container">
<div class="your_div_with_items">
'items'
</div>
</div>
Then the CSS:
然后是 CSS：
.container
{
padding: 0 'min_margin_ammount' 0 0;
}
.your_div_with_items
{
margin: 0 33% 0 0;
}
回答by DarkTrick
As far as I understand, you can place a div around your element, that defines a padding. A padding of an outer element is like the margin of an inner element.
据我了解，您可以在元素周围放置一个 div，它定义了一个填充。外部元素的填充就像内部元素的边距。
Imagine you want at least a margin of 1px:
想象一下，您至少需要 1px 的边距：
<div style="padding:1px">
<div style="margin: 0 33% 0 0;">
interesting content
</div>
</div>
edit: this is like Imigas's answer, but I think easier to understand.
编辑：这就像 Imigas 的答案，但我认为更容易理解。
回答by Quijibo
It is also possible to test if a certain percentage of the screen width/height is smaller than a length in pixels.
还可以测试屏幕宽度/高度的某个百分比是否小于以像素为单位的长度。
Here is a simple solution for this using JavaScript:
这是一个使用 JavaScript 的简单解决方案：
<body>
<div id="demo">
<p> Hello World! </p>
</div>
<script>
if (((window.innerWidth / 100) * 33) < 250) { /* Gets 33% of window width in pixels, tests if it is less than required minimum length (250px) */
document.getElementById("demo").style.margin = "0 250px 0 0" /* If true, set margin to length in pixels */
} else {
document.getElementById("demo").style.margin = "0 33% 0 0" /* If not true, the widow is big enough and percentage length is set */
}
</script>
</body>
