是否可以使用 CSS 设置按百分比设置的边距的最小值？

Question

我想要完成的与 min-width 属性对宽度值所做的非常相似。

我希望能够将边距值设置为一个百分比，然后切换到具体的预定义像素值。所以边距将是 margin-left: 20%;，然后我将得到 min-value: 100px。

这可能吗？如果不能 CSS，有哪些解决方法？

Answer 1

您可以使用媒体查询来实现您的目标。

如果您的 div 占据了大部分屏幕，除了左边的 20% 边距，并且您希望该边距不小于 100 像素，那么您可以使用媒体当框架宽度小于 500px（500px 的 20% 为 100px）时，查询将边距设置为 100px。

如果你的HTML是这个

<body>
    <div class="left-margin">
        My left margin is 20% unless that would become less than 100px, in which
        case, my left margin would become 100px.
    </div>
</body>

那么你的CSS可能看起来像这样

body, html
{
    margin: 0;
    padding: 0;
}

.left-margin
{
    margin-left: 20%;
}

@media screen and (max-width: 500px)
{
    .left-margin
    {
        margin-left: 100px;
    }
}

这基本上意味着媒体查询中的所有内容仅适用于 500 像素或更小的帧宽度。当屏幕宽度变得大于500px时，媒体查询的内容被忽略，边距变成20%。

http://jsfiddle.net/5g16xbtg/

Answer 2

尝试粘贴一个空的 div，宽度由 % 设置，最小宽度由 px 设置。只需在您想要留有边距的元素之前放入。例如下面。

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

是否可以使用 CSS 设置按百分比设置的边距的最小值？

Is it possible to set the minimum value of a margin set by a percentage using CSS?

css

web