floatで右の下に回り込ませたいのですが上手くいきません。

前提・実現したいこと

A,B,Cの3つの「divで囲ったコンテナ」がありまして
Aは左側にしてB,Cは右側の縦に並べたいのですが
どうしてもCがBの下に並んでくれません、
Cのポジションを下げても上手くいきません。
この場合どうコーディングすれば上手くいきますか？

該当のソースコード

css
1
2        .A {
3            float: left;
4        }
5
6        .B {
7            width: 900px;
8            height: 700px;
9            float: right;
10        }
11
12        .C {
13            width: 900px;
14            height: 700px;
15            float: right;
16            position: absolute;
17            top: 1000px;
18        }
19

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

回答3件

Grid layout

CSS
1body {
2  display: grid;
3  grid-template-columns: 1fr 900px;
4  grid-auto-rows: 700px;
5  row-gap: 300px;
6}
7
8.A {
9  grid-row: 1 / 3;
10}

Flexbox layout

HTML
1 <body>
2   <div class="A">A</div>
3   <div>
4     <div class="B">B</div>
5     <div class="C">C</div>
6   </div>
7 </body>

CSS
1body {
2  display: flex;
3}
4
5body > div:not([class]) {
6  display: flex;
7  flex-direction: column;
8}

投稿2018/11/15 07:24

x_x

総合スコア13749

自己解決

cにleft出位置指定するやり方で上手くいきました。

投稿2018/11/15 06:52

harusyoui

総合スコア55

.cのposition: absoluteがいらないのでは？
参考までに

CSS
1<style>
2.A {
3float: left;
4  background-Color:yellow;
5}
6
7.B {
8width: 900px;
9height: 700px;
10float: right;
11  background-Color:lime;
12}
13
14.C {
15width: 900px;
16height: 700px;
17float: right;
18margin-top: 300px;
19  background-Color:aqua;
20}
21</style>
22<div class="A">A</div>
23<div class="B">B</div>
24<div class="C">C</div>