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

Question

我设置了一个,margin: 0 33% 0 0;但我也想确保保证金至少是一定px数额.我知道min-marginCSS中没有,所以我想知道我在这里有没有选择？

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的a .

<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

我知道游戏已经晚了，但是你试过这个吗？

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

其中20px是任何你想要的至少一定数量的像素。所以边距将保持流动，但永远不会低于20px。

希望能帮助到你！