Question

我想要一行中的一些元素并让他们的父母与孩子一样大小，唯一的问题是当我对孩子们施加％保证金时，他们就不适合

它适用于边距中的像素，但我需要在这种情况下使用％来使其响应地工作

HTML：

<div class="holder">

    <div class="blue">
    </div>

    <div class="red">
    </div>

     <div class="green">
    </div>

</div>

的CSS：

.holder
{
    background-color:yellow;
    display:inline-block;
}

.holder > div
{
    width:200px;
    height:200px;
    display:inline-block;
    margin-left:2%;
}

.blue
{
    background-color:blue;
}
.red
{
    background-color:red;
}

.green
{
    background-color:green;
}

Answer 1

在css下面更新。检查链接jsfiddle

.holder
{
    background-color:yellow;
    display:inline-flex;
}

Answer 2

它不会......如果您使用inline-block，则holder div会折叠到内容的宽度。所以2％就可以了，但是如果加上6％（3 * 2％）那么持有者会变得更宽，然后保证金会增加......等等 ad infinitum

holder div保持原始大小（由于无限余量循环无法计算），好像没有应用“额外空间”但无论如何都会增加边距（一次）和布局中断。

SEE - http://jsfiddle.net/19s19oL7/

Ankush Kondhalkar提到的flexbox是一个解决方案，尽管目前支持相对有限。在此期间，请使用px和媒体查询。

使用内联块包装具有％作为边距的子元素

2 个答案: