css - 十分なスペースがある場合はdivを中央揃えにする方法、そうでない場合は右揃えにする方法

Question

親コンテナー => 柔軟な幅 (幅はブラウザー ウィンドウによって異なります)

子 div => 900px の固定幅 (親の内側)

私の要件は

1. 親の幅が 900 を超える場合は、子 div を中央に揃えます
2. 親の幅が 900 未満の場合は、子 div を右に揃えます。したがって、左側の部分は切り捨てられます。

純粋なCSSソリューションはありますか?

Answer 1

メディアクエリで試すことができます..

例えば：

@media only screen and (max-device-width: 900px) {
   .div { margin: 0px auto }
}
@media only screen and (min-device-width: 900px) {
   .div { float: left; }
}

cssをそれと組み合わせることができます...

Answer 2

parent {direction:rtl}
child {direction:ltr;}

基本的に、overflow右から左にスクロールするか、次の場合は左側を非表示にしhiddenます。

ここでテストして遊んでください:) : http://codepen.io/gcyrillus/pen/GHCne

Answer 3

メディアクエリの使用を検討しましたか?

ターゲットにしているすべてのブラウザーでサポートされていることを確認する必要があります。