仅在右侧构建带有一些框的网格 - 如何使其响应？

Question

我有一个4列网格。在第二排2个盒子只在右侧。 在这里看到我的自由曲线。

我到目前为止所做的是我在这里设置了25％的列。这里对第一行的4个盒子没问题。 第二个我这样建立： 我把DIV女巫设定为50％并设置为Float Right。在这个DIV我制作了2个其他Div，我再次设置为50％，但是将它们设置为Float Left。

<div class="column_2_4">
<div class="column_2_4">Content of Box</div>
<div class="column_2_4">Content of Box</div>
</div>

我的问题是现在。我如何获得正确的Boxes响应良好？当我调整浏览器大小时，盒子变得非常小，因为它们在50％的Wrapper内调整大小。但是当Boxes从右向左移动并且Resize与上面的4个Column Box中相同时会更好。

我只能在设置与第一行相同的第二行时执行此操作，但在此处将前两个DIV设为空白。 所以这样：

<div class="column_1_4"></div>
<div class="column_1_4"></div>
<div class="column_1_4">Content of the Box</div>
<div class="column_1_4">Content of the Box</div>

Answer 1

根据您的嵌套方法和边距/填充分布，您的答案基本上会变得更复杂。 要实现此功能，您必须在50％视口中创建 100％视口，请记住填充和边距会增加到框级别的宽度，如果这有用的话：

https://jsfiddle.net/2b0w13rL/

我没有使用您的命名约定，但我可以解释一下。您的方案发挥了以下作用：

.half {
    width: 48%;
}
.full_in_half {
    width: 104.16666666666666666666666666667%; /* (50/48)*100 */
    margin: 0 0 0 -2.0833333333333333333333333333333%;/* (1/48)*100 */
    background: blue;
}
.full_in_half .half {
    width: 46%;
    margin: 0 2%;
}


<div>
    <div class="half right">
        <div class="full_in_half">
            <div class="half"><span></span></div>
            <div class="half"><span></span></div>
            <div class="clear"><!-- --></div>
        </div>
        <div class="clear"><!-- --></div>
    </div>
    <div class="clear"><!-- --></div>
</div>

首先，我通过简单的计算（50/48）* 100将.full_in_half转换为相对于父级的100％宽度。我使用50因为我添加左+右1％边距...

从那里，我所做的只是剥离所有边距并应用负左边距以将.full_in_half完全带入视口（1/48）* 100。我必须考虑到父母的保证金：1％。所以，我的等式现在是 - （（1/48）* 100）。

一切都很好，但是，我们仍然有一些奇怪的比例。这是因为.half儿童的宽度和边距需要更新以适应。我们需要获得100％的1％而不是50％，这是父母的大小。简单数学100/50 = 2.然后保证金应为2％。

随着边距的增加，我们必须减小元素的宽度以避免溢出问题，因此宽度：46％;

我希望这对您有所帮助，您应该考虑为网格的子元素添加边距和填充，而不是网格本身。这种做法可以帮助浏览器更好地呈现，并使您可以更好地控制应用程序流。

@todo 这不是一个100％的视口创建，但它可以使用填充和负边距的变化。学习对生存至关重要。如果你可以拿走我给你的东西，然后告诉我100％的视口，我觉得我这辈子已经达到了一个人。