html - 我想为我的内容适当划分 div

Question

在第一张图片中，我想要那种类型的内容，首先是标题，然后是描述，但在我的页面中它显示不正确。在下面的图片中显示了我的页面 div

我想在第一张图片上显示我的 div

我的代码:

<div class="row">
      <div class="col-sm-7 bannervideo" style="margin-left:15px">
      <iframe oncontextmenu="return false" class="video_container" style="width:100%;height:400px;" src="<?php echo $videoDetail[0]['video_links']?>?autoplay=1" frameborder="0" allow="autoplay" allowfullscreen></iframe>
      <h1 class="vc_custom_heading dividefirstline" style="font-family:'Open Sans', Arial, Helvetica, sans-serif;color:black;font-size:20px;font-weight:600;line-height:26px;word-break: break-all;"><?php echo $videoDetail[0]['course_title']?>
      </h1>
       <p style="font-family:'Open Sans', Arial, Helvetica, sans-serif;color:black;font-size:15px;line-height:26px;font-weight:400" class="secondline"><?php echo substr($videoDetail[0]['video_description'],0,100);?></p>
      </div>
      <div class="col-sm-4 bannervideo">
         <b>Up next</b>
         <div class="row">
            <div class="col-sm-6 pointer relvideo">
               <iframe width="1280" height="150" src="https://www.youtube.com/embed/R2PuVo2U5ak" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            </div>
            <div class="col-sm-3">
               <p>Here Comes Title</p>
            </div>
            <div class="col-sm-3">
               <p>it is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
            </div>
         </div>
         <br><br>
      </div>
   </div>

Answer 1

您的标题和描述应该在同一列中。

   <div class="row">
      <div class="col-sm-7 bannervideo" style="margin-left:15px">
         <iframe oncontextmenu="return false" class="video_container" style="width:100%;height:400px;" src="<?php echo $videoDetail[0]['video_links']?>?autoplay=1" frameborder="0" allow="autoplay" allowfullscreen></iframe>
         <h1 class="vc_custom_heading dividefirstline" style="font-family:'Open Sans', Arial, Helvetica, sans-serif;color:black;font-size:20px;font-weight:600;line-height:26px;word-break: break-all;"><?php echo $videoDetail[0]['course_title']?></h1>
         <p style="font-family:'Open Sans', Arial, Helvetica, sans-serif;color:black;font-size:15px;line-height:26px;font-weight:400" class="secondline"><?php echo substr($videoDetail[0]['video_description'],0,100);?></p>
      </div>
      <div class="col-sm-5 bannervideo">
         <b>Up next</b>
         <div class="container">
            <div class="row">
               <div class="col-sm-6 pointer relvideo">
                  <iframe width="1280" height="150" src="https://www.youtube.com/embed/R2PuVo2U5ak" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
               </div>
               <div class="col-sm-6">
                  <h2>Here Comes Title</h2>
                  <p>it is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
               </div>
            </div>
         </div>
      </div>
   </div>