右对齐响应式CSS网格布局

Question

我需要开发一个HTML布局，我无法想到任何好的方法......

如何进行此布局？

它基本上是一个正常的响应中心列布局，其中列是一个带有一些填充的最大宽度 - 我对该部分没有任何问题。但是，我遇到问题的部分是还有一个右对齐列，但是它的左边缘与居中列的左边缘对齐。

我如何用CSS实现这一点，理想情况下不使用JavaScript来计算宽度等？

（是的，这必须适用于最近的两个版本的浏览器，因此不幸的是，css网格布局等可能不会有用）

像这样：

有人要求代码，所以这里有一些伪代码，但我要求使用HTML和CSS来做到这一点，所以这个（非常基本的）代码可能不是正确的方法。然而，这是一个非常基本的列布局，带有（非工作）右对齐列。

我或许还应该补充一点，我对HTML和CSS有很好的理解，但是想不到这种布局的方法。 ＆＃34;使用bootstrap＆＃34;遗憾的是，可能不是一个有用的答案，除非你能说明它是如何专门做到的（然后我会复制造型并自己做）

<style>
.centre-aligned-column {
    max-width: 960px;
    padding: 0 30px;
    margin: auto;
}
.right-aligned-column {
    /* how? */
}
</style>
<section>
    <div class="right-aligned-column">
        RIGHT ALIGNED COLUMN CONTENT
    </div>
</section>
<section>
    <div class="centre-aligned-column">
        CENTRE ALIGNED COLUMN CONTENT
    </div>
</section>

Answer 1

您可以使用bootstrap作为网格系统。它已经响应，您只需要调用特定宽度的类。请参阅此参考链接https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp。