我设置了一个margin: 0 33% 0 0;，但我还想确保边距至少是某个px 的数量。我知道 CSS 中没有 min-margin，所以我想知道这里是否有任何选项？
【问题讨论】：
这里真正的解决方案是使用媒体查询断点来确定 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;
}
}
在上面的代码中，将 max-width 更改为 33% 右边距不再适合您的任何屏幕宽度。
【讨论】：
在元素右侧放置一个div 和一个% width 和一个静态min-width。
<div style="position:relative; float:left; margin:0">
<div style="position:relative; float:left; width:33%; min-width:200px">
【讨论】：
clear，因为这会导致布局被推到不需要的位置。解决此问题的方法是在上面的父 div 上设置 overflow:hidden，但这确实不是一厢情愿的场景，并且会限制 HTML 工具提示等元素的使用，因为这些元素可能会被非溢出的边界框截断div。
float:right 来表示第二个div？
你可以试试这个
.mm:before {
content: "";
display: inline-block;
width: 33%;
min-width: 200px;
}
【讨论】：
我知道游戏已经很晚了，但你试过了吗？
margin: 0 max(33%, 20px) 0 0
20px 是你想要的至少一定数量的像素。所以边距将保持流动，但永远不会低于 20px。
希望对你有帮助！
【讨论】：
margin 的max() 值仅在我将其添加到调试工具时才有效，而在源样式文件中使用时无效？我的浏览器是 firefox，我正在使用 react-sass
Carl Papworth，在这种情况下，你可以使用这个：
body {margin-left: 60px; margin-right: 60px; width:calc(100%-120px); }
div#container {width:33%;}
【讨论】：
这个怎么样？
body {margin-left: 60px; margin-right: 60px; }
div#container {width:33%;}
【讨论】：
box-sizing: border-box; :)
如果你使用span，那么你必须这样做：
span{
display:block;
margin:auto;
}
如果您使用的是div，那么您可以这样做：
div{
margin:auto;
}
【讨论】：
我使用过上述几种解决方案，但在流畅且真正响应式的设置中，我认为最好的选择是在相应的容器/包装器上设置适当的填充。例子： 风格：
html {
background-color: #fff;
padding: 0 4em;
}
body {
margin: 0 auto;
max-width: 42em;
background-color: #ddf;
}
现在可以尝试各种窗口宽度，并尝试各种字体大小。
也可以试试working demo。
【讨论】：
您可以将您的项目保存在“容器”div 中，并将填充设置为您想要的“最小边距”。它可能不是您想要的，但它给您最小边距大小的感觉。
<div class="container">
<div class="your_div_with_items">
'items'
</div>
</div>
然后是 CSS：
.container
{
padding: 0 'min_margin_ammount' 0 0;
}
.your_div_with_items
{
margin: 0 33% 0 0;
}
【讨论】：
据我了解，您可以在元素周围放置一个 div，用于定义填充。外部元素的填充就像内部元素的边距。
假设您至少需要 1px 的边距：
<div style="padding:1px">
<div style="margin: 0 33% 0 0;">
interesting content
</div>
</div>
编辑：这就像 Imigas 的答案，但我认为更容易理解。
【讨论】：
还可以测试屏幕宽度/高度的某个百分比是否小于以像素为单位的长度。
这是一个使用 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>
【讨论】：