Css 用一些盒子在右边构建网格-如何使其响应？

我有一个4列网格。在第二排，2个盒子仅在右侧。 看看我的涂鸦

我现在做的是在这里设置25%的列。第一排的4个盒子没有问题。 第二，我以这种方式构建： 我做了一个DIV，设置为50%，设置为向右浮动。在这个DIV中，我做了另外两个DIV，我再次设置为50%，但设置为向左浮动

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

盒子里的东西
盒子里的东西

我的问题是现在。我如何得到正确的盒子？当我调整浏览器大小时，框变得非常小，因为它们在包装的50%内调整大小。但如果框从右向左移动，并且调整大小与上面4列框相同，则效果会更好

我只能这样做，当设置第二行与第一行相同时，但在这里将前两个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>

盒子里的东西
盒子里的东西

---

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

我没有使用你的命名约定，但是我可以解释。您的场景将与以下内容一起发挥作用：

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

.half{
宽度：48%；
}
1.全套半套{
宽度：104.1666667%；/*（50/48）*100*/
保证金：0.00-2.0833333%；/*（1/48）*100*/
背景：蓝色；
}
.半个半个半个半个半个{
宽度：46%；
利润率：0.2%；
}

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

从这里开始，我所做的就是简单地去掉所有的边距，并应用负的左边距将.full_in_一半完全带入视口（1/48）*100）。我必须考虑到家长的剩余利润：1%。我的方程是-（（1/48）*100）

尽管如此，我们仍然有一些奇怪的比例。这是因为.half子项的宽度和边距需要更新以适应。我们需要得到100%的1%，而不是母公司大小的50%。简单数学100/50=2。那么利润率应该是2%

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

<>我希望这能帮助你，你应该考虑给网格的子元素添加边距和填充，而不是网格本身。这种做法有助于浏览器更优化地渲染，并使您能够更好地控制应用程序流

@待办事项

---

虽然这还不是一个100%创建的视口，但它可以通过使用填充和更改负边距来实现。学习对生存至关重要。如果你能拿着我给你看的，然后给我看100%的视窗，我会觉得我这辈子只接触过一个人

使用预定义的网格系统。我不想使用任何框架或引导。所有这些东西都太大了。我只想知道一个自己的自定义代码来实现这一点。为了响应，您需要计算视口大小，创建断点，并编写样式规则，以便在每个断点处以不同方式显示内容。。。考虑到一个库引导程序有多小（115KB），它是一个更好的选择。我希望人们不要再为任何事情推荐引导程序了！是的，我真的很恼火这些人，他们总是推荐Bootstrap。这就是为什么大多数网站看起来总是一样的。。。因为引导CSS等等。我想在这里定制代码，我不认为对于这个“相对”简单的网格，我不能在这里使用库。