html / css 2カラムについて

Question

<div class='container'> <div class='column'> <article class="blog-card"> <div class="blog-card__image-wrapper"> <img class="blog-card__image" src="https://f.hubspotusercontent10.net/hubfs/8921667/pixta_44662249_L.jpg" loading="lazy" alt=""> </div> <section class="blog-card__content "> <h3 class="blog-card__title"><a href="https:// /テストテストテスト </a></h3> <div class="blog-card__post-summary"> <p>2020年、テストテストテスト</p> </div> <div class="blog-card__author"> <div class="blog-card__author-image" style="background-image: url('https://f.hubspotusercontent10.net/hubfs/8921667/favicon_1.png');"></div> <a class="blog-card__author-name" href="https://　　　　　　　/　"編集部">テスト</a> </div> <a class="blog-card__button button button" href="https://　　　　　　/テストテストテスト</a> </section> </article> </div> </div> <div class='column'> <article class="blog-card"> <div class="blog-card__image-wrapper"> <img class="blog-card__image" src="https://f.hubspotusercontent10.net/hubfs/8921667/pixta_44662249_L.jpg" loading="lazy" alt=""> </div> <section class="blog-card__content "> <h3 class="blog-card__title"><a href="https:// /テストテストテスト </a></h3> <div class="blog-card__post-summary"> <p>2020年、テストテストテスト</p> </div> <div class="blog-card__author"> <div class="blog-card__author-image" style="background-image: url('https://f.hubspotusercontent10.net/hubfs/8921667/favicon_1.png');"></div> <a class="blog-card__author-name" href="https://　　　　　　　/　"編集部">テスト</a> </div> <a class="blog-card__button button button" href="https://　　　　　　/テストテストテスト</a> </section> </article> </div> </div>

-------css-----

.container {
display: flex;
flex-wrap: wrap;
}
.column {
width: 100%;
}

@media (min-width: 1024px) {
.column {
width: 50%;
}
}

Comments

[Lhankor_Mhy]

「Aの横に配置したいのに、Aの上にきている」とのことですが、このAとはどれのことですか？

[退会済みユーザー]

A=aタグなのかなぁと思ったり思わなかったり。

<iframe width="560" height="315" src="xxxxxxxxxxxxxxxxxx</iframe>
とりあえず、ここ修正して下さいねー。
ちゃんと表示されなくなるので。

[croit]

早速ありがとうございます！
Aの画像を追加しました。

また、xxxxxxxxxxxxxxxxxxには入れる予定です、

宜しくお願いいたします！

[Lhankor_Mhy]

質問の編集を拝読。

よくわからないです。結局、Aはどれなんでしょうか……？
また、「2カラムにしたい」とありますが、「理想の状態」のスクリーンショットが3カラムなので、さらに謎が深まっています……

[croit]

申し訳ございません。実案件の為、詳細を見せることが難しく、
理想の写真のように、
3カラム（メインの画像２つ / 一番右にバナー）にするコードが分かれば幸いでございます。。。
hubspot専用のコードの為、すごくわかりづらく、申し訳ございません。

[Lhankor_Mhy]

2カラムじゃなくて3カラム、ということなのですね。

それで、どれとどれとどれがカラムなのですか？
.movie と .bannar と .btn-blue ですか？

[croit]

何度もありがとうございます！
刷新しました。

現状のコードですと、左右にならず、上下配置になります。　　これを左右にしたく思います。。。
URLのみ恐縮ながら、ブランクにしております。。

[Lhankor_Mhy]

Markdownで書いてください。コードが化けています。

ソースコードを書きましょう
https://teratail.com/help/question-tips#questionTips3-5-1

[Lhankor_Mhy]

過去質問を見てきましたが、Markdownの使い方がわからないようですね。
こちらやこちらを見ると、わかるかもしれません。

https://teratail.com/help/question-tips#questionTips3-7
https://teratail-v2.storage.googleapis.com/assets/img/tour/01.webm?1594714893253494

Answer 1

ご提示のコードが乱れているので推測での回答になってしまうのですが、HTMLを適宜直して .container > .column*2 という構造にした上で、以下のようにしてみてはいかがでしょうか。

.container{
  display: flex;
}

Comments

[Lhankor_Mhy]

解決しませんか？

不明の点があればコメントでお知らせください。