記事一覧部分のレイアウト崩れについて

現在HTML/CSSでワードプレス型のwebサイトをコーディングしています。

記事一覧ページは以下のように組んで、きちんと記事ページが左、カテゴリーが右へ寄ってくれているのですが、ここから#content_mainをループさせようと同じように書くと、レイアウトが崩れてしまいサイドバーと重なってしまったり、フッターと重なってしまったりします。

▼試してみたこと
左カラムに新たにclassを作り、display:flexで左コンテンツと右サイドバーを並べる

お手数ですがよろしくお願い致します。

HTML
1 <div class="main">
2     
3   
4<!--        メインの記事一覧           -->
5        <div id="content_main">
6            <article class="article">
7                <figure>
8                    <img src="../pineapple.jpg">
9                </figure>
10                    <div class="article-info">
11                        <h1>UCC Cafe Terrase</h1>
12                        <span class="article-category">アヤラ</span>
13                        <span class="article-category">雰囲気◎</span>
14                        <p>ここには記事のテキストが入ります。ここには記事のテキストが入ります。ここには記事のテキストが入ります。ここには記事のテキストが入ります。</p>
15
16                    </div>
17            </article>
18            </div>
19
20 
21        <!-- ▼ここから右サイドバー　▼ -->
22
23<div class="side-bar">
24
25    <div class="sidep">
26    <h2>▷　場所別カテゴリ</h2>
27    </div>
28
29<nav>
30    <div class="category">
31        <ul>
32            <li><a href="" class="category1">アヤラモール</a></li>
33            <li><a href="" class="category2">SMモール</a></li>
34            <li><a href="" class="category3">ITパーク</a></li>
35        </ul>
36    </div>
37</nav>
38
39
40
41<!-- 中略-->
42
43
44<!-- 　　▼　side-barの閉じタグ　▼　　 -->
45    </div>
46<!-- ▼　　mainの閉じタグ　　▼ -->
47</div>
48    
49
50

CSS
1/* ここからコンテンツ */
2.main{
3    max-width:1024px;
4    display:flex;
5    margin:0 auto;
6    padding:60px 0;
7
8}
9
10
11/* コンテンツメイン部分　*/
12#content_main {
13	width: 700px;
14	min-height: 250px;
15    float: left;　
16    /* margin-bottom:35px; */
17}
18
19
20/*          ここから記事一覧             */
21
22/* 記事一覧のarticle */
23#content_main .article {
24/* min-height: 250px; */
25background-color:#f7f7f7;
26
27}
28
29
30/* 記事一覧のfigure */
31#content_main .article figure {
32	float: left;
33	height: 250px;
34	width: 250px;
35	margin: 0;
36}
37
38
39/* 記事一覧のimg */
40#content_main .article figure img {
41	border-radius: 5px;
42	height: 250px;
43	width: 250px;
44}
45
46
47/* 記事一覧の詳細部分 */
48.article-info {
49	/* display: inline-block; */
50	float: right;
51    width: 400px;
52    text-align: left;
53}
54
55/* 記事一覧のタイトル */
56.article-info h1 {
57    margin-top: 20px;
58	margin-bottom: 1.2rem;
59}
60
61/*　カテゴリータグ　*/
62#content_main .article-category {
63	background-color: #FFF687;
64	border-radius: 15px;
65	color: #000000;
66    padding: 5px 8px 5px 8px;
67}
68
69/* 記事冒頭の紹介文 */
70.article-info p {
71    color: #8B8B8B;
72    text-align:left;
73    margin-top:20px;
74}
75
76
77
78
79
80/*         ここからサイドバー            */
81.side-bar{
82    color:#4b4b4b;
83    margin-left:30px;
84    float:right;
85    /* margin-top:60px; */
86}
87
88.sidep{
89    margin-bottom:21px;
90    text-align: left;
91
92}
93.category a{
94    color:#4b4b4b;
95}
96
97.category ul{
98    padding:0;
99}
100
101.sidep h2{
102    margin:0;
103    font-size:18px;
104}
105
106/* .side-bar p {
107    font-family:'Hiragino Kaku Gothic Pro';
108    font-size:18px;
109} */
110
111.category1{
112    display:block;
113    background-color:#e3ebf0;
114    width:246px;
115    padding-top:16px;
116    padding-bottom:16px;
117    padding-left:27px;
118    font-size:18px;
119    margin-bottom:21px;
120    border-radius: 25px;
121    box-shadow:0 2px 4px rgba(0,0,0,0.3);
122    text-decoration: none;
123}
124
125.category2{
126    display:block;
127    background-color:#e3ebf0;
128    width:246px;
129    padding-top:16px;
130    padding-bottom:16px;
131    padding-left:27px;
132    font-size:18px;
133    margin-bottom:21px;
134    border-radius: 25px;
135    box-shadow:0 2px 4px rgba(0,0,0,0.3);
136    text-decoration: none;
137
138}
139
140.category3{
141    display:block;
142    background-color:#e3ebf0;
143    width:246px;
144    padding-top:16px;
145    padding-left:27px;
146    padding-bottom:16px;
147    font-size:18px;
148    border-radius: 25px;
149margin-bottom:35px;
150box-shadow:0 2px 4px rgba(0,0,0,0.3);
151text-decoration: none;
152}
153
154

メインコンテンツのレイアウト、現在はこうなっています。
この画像の通り、記事表示を1つではなく、５つに増やしたいです。
なお、画像右下に写っているプロフィール欄のHTMLとCSSは省いています。

この状態から、記事数を2つにしようと、<div id="content_main">内にあるのをコピペしてみると表示が以下のようになってしまいます。

これをきちんと縦に並べる方法がわかりません。わかりにくくて申し訳ありませんが、よろしくお願いします。

FiroProchainezo

2019/08/17 05:42

> #content_mainをループさせようと同じように書くととはどういう意味ですか？ <div id="content_main">をたくさん書くということですか？ idはページ内でユニークでなければならないので、たくさん書くのはNGです。レイアウトが崩れてしまうというコードと、画像、ご自身が正しいと思っている画像を提示いただけませんか？また、ご提示のHTMLはdivが正しくペアになっていないように見えますが、ご自身の手元にあるHTMLでは正しく対応していますか？

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

回答1件

ベストアンサー

ここから#content_mainをループさせようと同じように書くと、

これは.articleを繰り返す、という意味ですよね？

レイアウトが崩れてしまいサイドバーと重なってしまったり、

ご提示のコードで試してみましたが、サイドバーと重なる問題は再現しませんでした。

フッターと重なってしまったりします。

ご提示のコードにはフッターがないようでした。

表示の崩れはfigureと.article-infoのfloatが原因だと思いますので、flexで対応してはいかがでしょうか。
サンプル

CSS
1.article{
2  display: flex;
3}

投稿2019/08/17 06:08

Lhankor_Mhy

総合スコア36074

yurina_web

2019/08/17 06:28

ご回答ありがとうございます。 figureと.artivle-infoのfloatを消して、 .article{ display: flex; flex-direction: column; } を使ってみましたが、なにも変わらずでした。使い方がおかしいのでしょうか・・

Lhankor_Mhy

2019/08/17 06:33

サンプルのページはご覧いただいてますか？当方の環境では、 .article{ display: flex; } とすれば記事が縦に並びます。 yurina_webさんの環境ではそのようにならないのですか？

Lhankor_Mhy

2019/08/17 06:35

ああ、修正前のサンプルを貼ってしまいました。変更しました。

yurina_web

2019/08/17 06:52

サンプル再度拝見しました。サンプルと照らし合わせながらやってみましたが、画面の幅を超えて【記事】【記事】【サイドバー】と大きく横並びになってしまいます。（横スクロールができてしまう状態です） Lhankor_Mhyさんは<article class="article">以下を複数並べていたのに対し、私は<div id="content_main">ごと複数並べていたのでそれのせいかと思いましたが、違っていました。住みませんもう一度いただいたサンプルと比べて見直してきます。

yurina_web

2019/08/17 07:01

縦並びできました！ですがサイドバーが記事下にいってしまったので、もう少し修正してこようと思います。問題自体は解決できたのでベストアンサーさせていただきます！ありがとうございました。

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