Question

我设置了margin: 0 33% 0 0;但是我还要确保保证金至少某个px金额。我知道CSS中没有min-margin所以我想知道我在这里有没有选择？

Answer 1

这里的真正解决方案是使用媒体查询断点来确定何时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％右边距不再适合您。

Answer 2

在您的元素右侧放置一个div，其中包含％width和一个静态min-width。

<div style="position:relative; float:left; margin:0">
<div style="position:relative; float:left; width:33%; min-width:200px">

Answer 3

你可以试试这个

.mm:before {
    content: "";
    display: inline-block;
    width: 33%;
    min-width: 200px;
}

Answer 4

Carl Papworth，在这种情况下，你可以使用这个：

body {margin-left: 60px; margin-right: 60px; width:calc(100%-120px); }
div#container {width:33%;}

Answer 5

我知道比赛已经很晚了，但是您尝试过吗？

margin: 0 max(33%, 20px) 0 0

其中 20px 是您希望至少具有一定数量的像素。因此，保证金将保持浮动，但永远不会低于 20px 。

希望有帮助！

Answer 6

这个怎么样？

body {margin-left: 60px; margin-right: 60px; }
div#container {width:33%;}

Answer 7

如果你使用的是span，那么你必须这样做：

span{
display:block;
margin:auto;
}

working demo

如果您使用div，则可以执行此操作：

div{
  margin:auto;
}

Answer 8

我已经使用了上述几种解决方案，但是在流畅且真正响应的设置中，我认为最好的选择是在相应的容器/包装上设置适当的填充。例：式：

 html {
   background-color: #fff;
   padding: 0 4em;
 }
 body {
   margin: 0 auto;
   max-width: 42em;
   background-color: #ddf;
 }

现在玩各种窗口宽度，并尝试各种字体大小。

同时尝试working demo。

Answer 9

您可以将项目保留在“容器” div中，并将填充设置为您想要的“最小利润”。可能不是您要找的东西，但这给了您最小保证金大小的感觉。

expired

然后是CSS：

[ngClass]

Answer 10

据我了解，您可以在元素周围放置一个div，以定义填充。外部元素的填充就像内部元素的空白。

想象一下，您希望至少有1px的边距：

<div style="padding:1px">
  <div style="margin: 0 33% 0 0;">
      interesting content
  </div>
</div>

edit：这就像Imigas的答案，但我认为更容易理解。

Answer 11

还可以测试屏幕宽度/高度的特定百分比是否小于以像素为单位的长度。

这是使用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>

在CSS中使用百分比边距但想要像素的最小边距？

11 个答案: