右揃え応答CSSグリッドレイアウト

Question

私は、私が開発する必要があり、私はそれを行うための任意の良い方法を考えることができないHTMLのレイアウトを持っている...

どのように私はこのレイアウトを作ることができますか？

これは、基本的に応答性の高い中心配置のレイアウトです。ここでは、列がいくつかのパディング付きの最大幅です - その部分に問題はありません。しかし、私が問題を抱えている部分は、右揃えの列もありますが、これの左端は中央の列の左端に揃えられています。

JavaScriptを使用して幅を計算するなど、理想的にはこれをCSSで実現できますか？

（そして、はい、これはCSSのグリッドレイアウトなどは、おそらく、残念ながら有益であることを行っていないので、ブラウザの最新の2つのバージョンで動作するように持っている）このよう

：

誰かがコードを尋ねたので、ここにいくつかの疑似コードがありますが、私はHTMLとCSSを使ってこれを行う方法を尋ねています。この（非常に基本的な）コードは正しい方法ではないかもしれません。それにもかかわらず、ここでは、（非有効な）右揃えの列を持つ非常に基本的な列レイアウトがあります。

また、私はHTMLとCSSをよく理解していますが、このレイアウトを行う方法について考えることはできません。 「使用のブートストラップは、」あなたは

<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

あなたは、グリッド・システムのブートストラップを使用することができ、それは、具体的にこれを行うことができます（そして私は自分自身をスタイリングをコピーし、それをやる）方法を示すことができない限り、残念ながら、おそらく役に立つ答えではありません。これはすでに応答しており、特定の幅のクラスを呼び出すだけで済みます。この参照リンクhttps://www.w3schools.com/bootstrap/bootstrap_grid_system.aspを参照してください。