CSSで左上に詰めた回り込みを指定したい

HTML
1<body>
2  <div style="width:50%">A</div>
3  <div style="width:60%">B</div>
4  <div style="width:30%">C</div>
5                 :
6</body>

HTMLソースコードは上記の通りで、
表題の通り、左上に詰めたレイアウトにしたいです。

↓↓ やりたい事 ↓↓
]

回り込みを指定するCSSの「float:left」を使ってみましたが、
div要素「C」がdiv要素「A」の隣に来ず
div要素「B」の横に来てしまいました。。

調べる為の検索ワードも分からず、
調べようが無いので、助力を願いたいです。

ku__ra__ge

2020/06/29 07:16

「右上に詰めた回り込み」が具体的にどうなってほしいか読み取れません。具体的にどのような表示を目的としているのかを図などで質問に追記してください。

Lhankor_Mhy

2020/06/29 08:25

「右上に」詰めるのに、左寄せにする「float:left」を使ったのには、何か理由がありますか？

Ui.M.Sakura

2020/06/29 11:13

>「右上に詰めた回り込み」が具体的にどうなってほしいか読み取れません。具体的にどのような表示を目的としているのかを図などで質問に追記してください。イメージ図を追記しました！！ >「右上に」詰めるのに、左寄せにする「float:left」を使ったのには、何か理由がありますか？すいません。誤字です！！

行動規範の内容に同意します

回答1件

ベストアンサー

こんにちは。
こういう感じでしょうか。

サンプル

html
1  <div class="_50">A</div>
2  <div class="_60">B</div>
3  <div class="_30">C</div>

css
1body{
2  display: grid;
3  grid-template-columns: repeat(10, 1fr);
4  grid-auto-flow: row dense;
5  justify-content: end;
6  direction: rtl;
7}
8._50{
9  background: pink;
10  grid-column: span 5;
11}
12._60{
13  background: ivory;
14  grid-column: span 6;
15}
16._30{
17  background: cyan;
18  grid-column: span 3;
19}