<div>で分割したときに上に詰まってしまう原因を教えてください。

現在、lpの模写をしています。

サイト上のproductにあたる部分を目指して模写をしているのですが以下の画像のようになってしまいます。

productのタイトルとMOREボタンを平行にして

その下にlistをそろえたいのですがうまくいきません。
どうかよろしくお願いします。

HTML
1コード
2  <div class="product-wrapper">
3    <div class="product-top">
4        <div>
5          <h1 class="product-title">PRODUCT</h1>
6        </div>
7        <div class="product-btn">
8          <a href="#" class="btn more-btn">MORE</a>
9        </div>
10    </div>
11        <div class="product-top">
12          <div class="product-list">
13            <img class="product-logo" src="https://s3-ap-northeast-1.amazonaws.com/paspol-images/wp-content/uploads/2019/05/fes001t.png" />
14            <h2>The World Festival Guide -海外の音楽フェス完全ガイド-</h2>
15          </div>
16        </div>
17        <div class="product-top">
18          <div class="product-list">
19            <img class="product-logo" src="https://s3-ap-northeast-1.amazonaws.com/paspol-images/wp-content/uploads/2018/11/banner_%E3%82%B5%E3%83%A0%E3%83%8D%E3%82%A4%E3%83%AB21.png" />
20            <h2>この世界で死ぬまでにしたいこと2000</h2>
21          </div>
22        </div>
23        <div class="product-top">
24          <div class="product-list">
25            <img class="product-logo" src="https://s3-ap-northeast-1.amazonaws.com/paspol-images/wp-content/uploads/2018/09/365%E6%97%A5%E6%9C%AC%E3%82%AB%E3%83%AC%E3%83%B3%E3%82%BF%E3%82%99%E3%83%BC_%E3%82%B5%E3%83%A0%E3%83%8D%E3%82%A4%E3%83%AB1.png" />
26            <h2>365日日本一周 絶景日めくりカレンダー</h2>
27          </div>
28        </div>
29        <div class="product-bottom">
30          <div class="product-list">
31            <img class="product-logo" src="https://s3-ap-northeast-1.amazonaws.com/paspol-images/wp-content/uploads/2018/05/passportnotebook-thumb11.png" />
32            <h2>PASSPORT NOTEBOOK series</h2>
33          </div>
34        </div>
35        <div class="product-bottom">
36          <div class="product-list">
37            <img class="product-logo" src="https://s3-ap-northeast-1.amazonaws.com/paspol-images/wp-content/uploads/2018/02/englishbook-thumb11.png" />
38            <h2>ひとり旅英会話BOOK</h2>
39          </div>
40        </div>
41        <div class="product-bottom">
42          <div class="product-list">
43            <img class="product-logo" src="https://s3-ap-northeast-1.amazonaws.com/paspol-images/wp-content/uploads/2016/12/212465b615e458e672a9e0a1cbb1acf1.png" />
44            <h2>日本の絶景ポストカード　春編</h2>
45          </div>
46        </div>
47    </div>

CSS
1コード
2.product-wrapper {
3  background-color: #ffffff;
4  width: 993px
5  height: 1325px;
6}
7
8.product-title {
9  float: left;
10  font-weight: normal;
11  font-size: 30px;
12  margin-top: 50px;
13  margin-left: 7%;
14}
15.product-btn {
16  float: right;
17  margin-top: 50px;
18  margin-right: 7%;
19  text-align: center;
20}
21
22.product-top {
23  margin-bottom: 50px;
24}
25.product-list {
26  margin-top: ;
27
28}
29.product-logo {
30  width: 241px;
31  height: 319px;
32}
33
34.product-top {
35  float: left;
36  width: 25%;
37}
38.product-bottom {
39  float: left;
40  width:25%;
41}
42
43.btn {
44  display: inline-block;
45  width: 162px;
46  height: 46px;
47  font-size: 14px;
48  color: #13191b;
49  border: 1px solid #13191b;
50  line-height: 46px;
51}
52.more-btn {
53  color: black;
54  vertical-align: middle;
55}

kei344

2019/07/29 15:30

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。

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

回答2件

ベストアンサー

.product-topに「float:left」が指定されています。

これによって、「product-wrapper」の子要素が全て
”中に浮いた状態”になっているため思うような挙動にならないんだと思います。
※中に浮くのは「fleat」の性質です。

「product-wrapper」にはwidthとheightが指定されていますが、
前述の通りこのセレクタの中身は空っぽなので
指定したwidthとheightは無視され実質縦横0pxになってしまいます。

そもそもの話になってしまいますが、
今はこのようなレイアウト構造を作る場合「float」はあまり使いません。

「display:flex」というプロパティと値を調べてみてください。
こちらの方が、レスポンシブにも対応しやすく汎用性が高いです。
「float」の上位互換として使えます。

また、コーディングするときは
各要素に仮でいいので背景色を付けておくと
構造がわかりやすいのでコーディングもしやすくなると思います。

投稿2019/07/24 13:15

Snpy

総合スコア139

soso0programmer

2019/07/25 06:49

回答ありがとうございます。 product-wrapperの背景色をつけようとしても、色がつかないことから機能してないことがわかりました。しかし、なぜ機能していないのかがわかりません。またclass="prodcut-top"が複数あるミスを見つけました。 product-wrapperのすぐ下にある方をproduct-headerに変えて取り組んでみましたがまだうまくいきませんでした。もしお時間があれば具体的にどうすればいいか教えてほしいです。昨日から試しているのですがまだわかりません。

Snpy

2019/07/25 07:14

＞なぜ機能していないのかがわかりません。昨日記載した通りです。 product-wrapperの子要素らには「float」が指定されていますね？「float」が指定された要素は、宙に浮きます。これはどういうことかというと、例えば・・・ ■ ■ ■ このように配置された要素に「float」を指定すると、ブラウザ上では ■ このようになります。つまり、３つの■が宙に浮いて重なっている状態です。このとき、ブラウザ上では、３つの■の親要素の中には”何も要素が無い”と判断されます。子要素を持たない要素はwidthとheightが効きません。なので指定しても0pxのままです。「背景色が効かない」のではなく、「効いているけど見えない（0pxだから）」のが正しい認識です。対策としては、前回の回答でもお伝えしたように「flex」を使うのがオススメです。 floatでもご希望のレイアウトが作れないわけではありませんが、今現在悩まれているように、floatは性質を理解していないと混乱するので、 flexを使った方がわかりやすいです。 flexはfloatの上位互換的なプロパティなので、特別な理由がない限りわざわざfloatを使う必要はないと思います。 floatよりもflexの使い方を理解している方が実戦ではるかに役に立ちます。

soso0programmer

2019/07/25 09:31

大変詳しい回答ありがとうございました。やっと理解できました。親要素であるproduct-wrapperの左上に子要素が集まってしまった結果、上の詰まりが生じたということがわかりました。またwidthとheightの親子要素の関係性はサイトをみてわかりました。各要素に仮で色をつけるというテクニックは大変勉強になりました。ありがとうございます。

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