div の float で実現したい。

div の float で画面レイアウトを作成しています。
tableタグでは以下で実現できるものを　div の float だけで実現する方法があれば教えていただきたいです。

テーブルで作成すると以下のイメージです。

html
1<table border=1>
2  <tr><td rowspan=2>aaa</td><td>bbb</td></tr>
3  <tr><td>ccc</td></tr>
4</table>

kei344

2020/04/23 06:55

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

ryu_k

2020/04/24 01:08

ありがとうございます。おっしゃる通りだと思います。

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

回答1件

ベストアンサー

やりたいことは、こういうことでしょうか?
CodePenで作ってみました。

HTML
1<div class="parent">
2  <div class="aaa">aaa</div>
3  <div class="bbb">bbb</div>
4  <div class="ccc">ccc</div>
5</div>

CSS
1.parent::after {
2  content: "";
3  display: block;
4  clear: both;
5}
6/* .aaa、.bbb、.ccc共通の指定 */
7.parent > * {
8  float: left;
9  width: 50%;
10}
11
12.aaa {
13  height: 200px;
14  background: #fcc; /* 背景色赤 */
15}
16.bbb {
17  height: 100px;
18  background: #cfc; /* 背景色緑 */
19}
20.ccc {
21  height: 100px;
22  background: #ccf; /* 背景色青 */
23}