在CSS中使用百分比边距，但想要最小边距（以像素为单位）？

| 我设置了“ 0”，但是我还要确保保证金至少是一定的“ 1”。我知道CSS中没有ѭ2so，所以我想知道这里是否有任何选择？

已邀请:

10 个回复

将div和％width和一个静态min-width放置在元素右侧。

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

广躺椽

真正的解决方案是使用媒体查询断点来确定何时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;
    }
}

在上面的代码中，将ѭ8更改为33％右边距不再适合您的任何屏幕宽度。

辩谷变充

你可以试试这个

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

橙绥

卡尔·帕普沃思（Carl Papworth），在这种情况下，您可以使用以下方法：

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

凡夕

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

span{
display:block;
margin:auto;
}

工作演示如果您使用的是div，那么您可以执行以下操作：

div{
  margin:auto;
}

禽兢玫坞劲

这个怎么样？

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

扇献隙

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

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

现在尝试各种窗口宽度，并尝试各种字体大小。也尝试工作演示。

递劝臼类洪

您可以将项目保留在\“ container \” div中，并将填充值精确设置为您想要的\“ min-margin \”。它可能并非您要找的东西，但是它给了您最小边距的感觉。

<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>

编辑：这就像伊米加斯的答案，但我认为更容易理解。

久纳禾澎

还可以测试屏幕宽度/高度的某个百分比是否小于以像素为单位的长度。这是使用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中使用百分比边距，但想要最小边距（以像素为单位）？

10 个回复

发起人

css

margin

问题状态

在CSS中使用百分比边距，但想要最小边距（以像素为单位）？

与内容相关的链接

10 个回复

发起人

css

margin

问题状态