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

Question

我已经设置了margin: 0 33% 0 0;，但我还想确保这个边距至少有一定的px值。 我知道CSS中没有min-margin，所以我想知道我是否有任何选项？

- Brett

---

也许可以在你设置 margin 的 div 右侧使用一个空的 div？然后为第二个 div 设置 width: 33%; min-width: npx;？这两个元素都包含在一个容器 div 中并浮动... 不确定是否有效... 只是一个想法。 - AR.

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％右边距的屏幕宽度。

- Clarus Dignus

Answer 2

在您的元素右侧放置一个具有％width和静态min-width的div。

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

- bogatyrjov

---

这种方法防止了在父级div中使用其他浮动元素和 clear，因为这样会导致布局被推到不想要的位置。解决方法是在父级div上设置 overflow:hidden，但这并不是一个理想的方案，会限制像HTML工具提示这样的元素的使用，因为它们可能被非溢出的div的边界框剪裁掉。 - Kafoso

你是不是想在第二个 div 中使用 float:right？ - Alexis Wilke

Answer 3

你可以尝试这个。

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

- Ever

Answer 4

我知道现在有点晚了，但你试过这个吗？

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

其中20px是你想要的像素数最小值。因此，边距将保持流动性但永远不会低于20px。

希望这有所帮助！

- user3009269

---

为什么在源样式文件中使用max()值时，只有在调试工具中添加它才有效，而不是直接使用？我的浏览器是火狐浏览器，我正在使用React-Sass。 - Sapinder Singh

@Sapinder 我不熟悉SASS或react-sass，但从我搜索的结果来看，它们似乎还不支持CSS max函数。其中一种解决方法是使用calc()包装max函数。我已经制作了这个CodePen作为POC https://codepen.io/ella301/pen/oNbMjvB 希望能有所帮助！ - user3009269

Answer 5

在这种情况下，您可以使用Carl Papworth提供的方法：

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

- Andre Duarte

Answer 6

这个怎么样？

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

- GlennFriesen

---

如果你正在使用100%宽度的body，那么会有一个问题，因为x轴上会有溢出。现在你可以做一个"overflow-x: hidden"，但是这会导致右侧div在调整大小时被裁剪。棘手！ - Carl Papworth

@CarlPapworth ...或者使用 box-sizing: border-box; :) - Brett

Answer 7

据我所知，您可以在元素周围放置一个 div，定义一个填充。外部元素的填充就像内部元素的边距一样。

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

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

编辑：这个答案类似于Imigas的答案，但我认为更易于理解。

- DarkTrick

Answer 8

你可以将你的项目放在一个“容器”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;
}

- lmigas

Answer 9

如果您正在使用 span，那么您需要这样做：

span{
display:block;
margin:auto;
}

工作演示

如果你正在使用 div，那么你可以这样做：

div{
  margin:auto;
}

- Phoenix

Answer 10

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

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

现在尝试不同的窗口宽度，还可以尝试不同的字体大小。

同时也可以尝试工作演示。

- untill