HTML, CSSでブロック要素を並べる時の高さ位置について（floatで配置）

CSSのflaotで要素を左並べにすると、図のパターンAのように高さが一番高い（ブロック3）の要素に合わさってブロック４が低い位置に配置されてしまいますが、パターンBのように前のブロックを基準にブロックを配置したいと思っておりますが、うまくできません。。。

実際にはもっと下まで続きますが、まずは2段で教えていただけましたら大変幸いです。

HTML
1<body>
2<div class="height1"></div>
3<div class="height1"></div>
4<div class="height2"></div>
5<div class="height1"></div>
6<div class="height1"></div>
7<div class="height1"></div>
8</body>

CSS
1<style>
2.height1{
3	width:300px;
4	margin:30px;
5	float:left;
6	height:200px;
7	background-color: #ff0;
8}
9
10.height2{
11	width:300px;
12	margin:30px;
13	float:left;
14	height:300px;	
15	background-color: #0ff;
16}
17
18</style>

m.ts10806

2018/04/26 04:27

プログラムコード(およびエラーメッセージ)は```で囲ってください。（わからなければ質問編集画面でコード部分を選択し<code>ボタンを押してください）正しく反映されているかどうかは質問編集画面のプレビューを見ながら編集していってください。

dit.

2018/04/26 06:55

floatは使用していませんが、こういうのもありますのでご参考までhttps://www.webcreatorbox.com/tech/css-grid-layout

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

回答1件

ベストアンサー

HTMLとCSSのみであれば以下の構造にして、.floatにfloatを設定してはどうでしょう。

HTML
1<div class="wrap">
2  <div class="float">
3      <div class="height1">1</div>
4      <div class="height1">1</div>
5  </div>
6  <div class="float">
7      <div class="height1">1</div>
8      <div class="height1">1</div>
9  </div>
10  <div class="float">
11      <div class="height2">2</div>
12      <div class="height1">1</div>
13  </div>
14</div>

CSS
1
2div {
3  border: 1px solid #ccc;
4}
5.wrap::after {
6  content:'';
7  display:block;
8  clear:both;
9}
10.float {
11  float: left;
12  width: 30%;
13}
14.height1 {
15  width: 98%;
16  margin: 1%;
17  height: 100px;
18}
19.height2 {
20  width:98%;
21  margin: 1%;
22  height: 200px;
23}