css - Bootstrap - 连续两个 div，一个固定，一个灵活

Question

我尝试连续获得两个 div。一个固定（220 像素），另一个填充页面的其余部分，因此它始终为 100%。

我也读过类似的主题： 一行中的两个 div

我尝试了几种方法，Bootstrap、Flexbox、Floating Divs，最后我使用了 calc，但我无法获得 100% 准确的结果。

我最喜欢的方法是使用 Bootstrap，但无论是使用网格还是其他选项，我都无法让它工作。

实际的方法似乎有点混乱：每当我使用 calc() 并减去第一个容器的相同宽度时，它都会显示在第二行中。只有当我再减去 4px 时，它才会显示在同一行中。

我猜这是两个 div 左右的左右边界。即使我将边距设置为 0px，div 之间也有一点边距。

    <div style="width:220px; display:inline-block; background-color:#F00; margin: 0px;">
        1
    </div>
    <div style="width: calc(100% - 224px); display:inline-block; background-color:#FF0; margin: 0px;">
        2
    </div>

我的问题很简单：我怎样才能准确地做到这一点？

标签： cssbootstrap-4flexbox