動画とコメントを揃えて横並びにするにはどうすればよいでしょうか？

Question

実現したいこと

画像・動画が1件または2件の時は動画を縦に並べて1件目のトップの位置と横並びでコメント表示
画像・動画が3件の時は動画を2件横並びにしてその下に1件の合計3件に回り込みでコメント表示
にしたいと考えております。

発生している問題・分からないこと

画像は希望通りに並べることができたのですが、動画になると上部に空白が発生してしまい困っております。

該当のソースコード

<?php
$upload_dir = wp_upload_dir();
echo '<div class="main_container">';
echo '<div class="quest_container">';
// var_dump($rows);
foreach ($rows as $row) {
$files = array_filter([$row->attach1, $row->attach2, $row->attach3]);
$views = []; //ＨＴＭＬをため込む配列の初期化する
foreach ($files as $file) {
$info = pathinfo($file);
$attach_url = $upload_dir['baseurl'] . '/attach/' . $info['basename'];
$ext = $info['extension'];
switch ($ext) {
case 'jpeg':
case 'png':
$views[] = '<img style="height:350px;width:530px" src="' . $attach_url . '">';
break;
case 'mp4':
$views[] = '<video height="350px" width="530px" src="' . $attach_url . '" controls>';
break;
case 'pdf':
$views[] = '<iframe style="height:350px;width:530px" src="' . $attach_url . '"></iframe>';
break;
default:
break;
}
}
$count = count($views);
if ($count == 1 || $count == 2) {
$qm = 'quest_markdown';
$qi = 'quest_item';
} else {
$qm = 'quest_markdown_group';
$qi = 'quest_item_group';
}
if (empty($row->usericon)) {
$usericon_src = 'wp-content/themes/sample_theme/images/noimage.png';
} else {
$usericon_src = $upload_dir['baseurl'] . '/attach/' . $row->usericon;
}
?>

<div class="quest_container">
  <div class="quest_header_title">
    タイトルテスト１タイトルテスト１タイトルテスト１タイトルテスト１タイトルテスト１タイトルテスト１タイ
  </div>
  <div class="quest_feeling_stamp">
    <input type="radio" name="stamp" value="1" id="stamp" /><label
      for="stamp"
      class="quest_stamp_label"
    ></label>
  </div>
  <!-- 画像・動画が1件か2件の時 -->
  <!-- <div class="quest_markdown"> -->
  <div class="quest_markdown_group">
    <!-- 画像・動画が1件か2件の時 -->
    <!-- <div class="quest_item"> -->
    <div class="quest_item_group">
      <img style="height: 350px; width: 530px" src="" />
    </div>
    <!-- 画像・動画が1件か2件の時 -->
    <!-- <div class="quest_item"> -->
    <div class="quest_item_group">
      <img style="height: 350px; width: 530px" src="" />
    </div>
    <!-- 画像・動画が1件か2件の時 -->
    <!-- <div class="quest_item"> -->
    <div class="quest_item_group">
      <img style="height: 350px; width: 530px" src="" />
    </div>
  </div>
  <div class="quest_overview">
    コメントテスト１コメントテスト１コメントテスト１コメントテスト１コメントテスト１コメントテスト１コメントテスト１コメントテスト１コメントテスト１コメントテスト１コメントテスト１コメントテスト１コメントテスト１コメントテスト１コメントテスト１コメントテスト１コメントテスト１コメントテスト１コメントテスト１コメントテスト１コメントテスト１コメントテスト１コメントテスト１コメントテスト１コメントテスト１コメントテスト１コメントテスト１コメントテスト１コメントテスト１コメントテスト１コメントテスト１コメントテスト１コメントテスト１コメントテスト１コメントテスト１コメントテスト１コメントテスト１コメントテスト１コメントテスト１コメントテスト１コメントテスト１コメントテスト１コメントテスト１コメントテスト１コメントテスト１コメントテスト１コメントテスト１コメントテスト１コメントテスト１コメントテスト１コメントテスト１コメントテスト１コメントテスト１コメントテスト１コメントテスト１コメントテスト１コメントテスト１コメントテスト１コメントテスト１コメントテスト１コメントテスト１コメントテスト１コメント
  </div>
  <div class="quest_usericon_img">
    <img src="" />
    <div class="quest_username">
      名前テスト1名前テスト1名前テスト1名前テスト1名前テスト1名前テスト1名前テスト1名前テスト1名前
    </div>
  </div>
</div>

<style>
.quest_header_title {
font-size: 25px;
display: inline-block;
vertical-align: top;
width: 1010px;
padding-right: 30px;
}

.quest_feeling_stamp {
display: inline-block;
}

.quest_markdown {
    float: left;
}

.quest_item {
    display: block;
    margin-bottom: 30px;
    padding: 0px 18px 0px 5px;
}

.quest_item_group {
float: left;
display: inline-block;
margin-bottom: 25px;
padding: 0px 18px 0px 5px;
margin-top: -20px;
}

.quest_overview {
color: #e52d77;
font-size: 150%;
font-weight: 700;
width: 1098px !important;
margin-top: 25px;
}
</style>

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

.quest_item_group に margin-top: -20px; を設定したところ多少改善されたのですが、回り込んだコメントと動画に隙間が発生してしまいます。

補足

※ 参考画像

Comments

[Lhankor_Mhy]

HTMLをご提示いただいた方が回答はつきやすいかと思います。

[homepage-site]

Lhankor_Mhy さんアドバイスありがとうございます。
追加させていただきました。

[Lhankor_Mhy]

補足願います。
・ご提示のソースには動画がないようでしたが、問題が起きるのは動画の時、という認識で合っていますか？
つまり、ご提示のソースでは問題が起きないという理解でいいでしょうか？
・『上部に空白』というのは、スクリーンショットで言うと『タイトルテスト１』の下の部分のことですか？

[homepage-site]

Lhankor_Mhy さん回答ありがとうございます。
3件目の動画とコメントテスト1の間に出来ている上部の空白になります。

[Lhankor_Mhy]

ご提示のコードでは問題が起きない、という認識は合っていますでしょうか？

[homepage-site]

Lhankor_Mhy さん回答ありがとうございます。
エラーは発生していないのですが、quest_overview に margin-top: 25px; を設定した場合コメントテスト1の位置が下がってしまっているようです。

https://imgur.com/XyUWbjB.png

上記とは別に問題が発生しているようで、 quest_item_group に margin-top: -20px; を設定したところ1、2件目の画像とスタンプ画像の距離が狭まってしまい、3件目の画像も1、2件目の画像との距離は狭まってしまいます。

https://imgur.com/a/MhfmTWg.png

[Lhankor_Mhy]

> quest_overview に margin-top: 25px; を設定した場合コメントテスト1の位置が下がってしまっている

margin-top は上方向の余白の設定ですから、余白が増えた分テキストは下がります。

---

> quest_item_group に margin-top: -20px; を設定したところ1、2件目の画像とスタンプ画像の距離が狭まってしまい

margin-top は上方向の余白なので、負にすると上の要素と重なります（特殊なマージン相殺）。

[homepage-site]

Lhankor_Mhy さんアドバイスありがとうございます。
CSS を調節してみました。

.quest_item_group {
float: left;
display: inline-block;
margin-bottom: 25px;
padding: 0px 18px 0px 5px;
}

.quest_overview {
color: #e52d77;
font-size: 150%;
font-weight: 700;
width: 1098px !important;
}

Answer 1

『画像は希望通りに並べることができたのですが、動画になると上部に空白が発生』という問題のご説明から、「ご提示のコードでは問題が起きない」という前提で回答させていただきます。

　コードがないため想像になってしまうのですが、おそらくアスペクト比の問題かと思います。動画でよく使われるアスペクト比は16:9です。幅が530pxだとすると、高さは298pxほどになります。ご提示の画像のコードではheight: 350px; width: 530pxとなっていますから、およそ50px余ります。これが上下の余白となっているのでしょう。

Comments

[homepage-site]

Lhankor_Mhyさん回答ありがとうございます。
動画のアスペクト比で上下の余白が出来ていたんですね勉強になりました。