小さな画面でdivを下に移動

Question

画面サイズが小さくなったときにチャットボックスをビデオの下に移動させるのに問題があります。また、小さな画面で小さくならないようにするにはどうすればいいですか？私はそれが敏感であることを望む。

<div class="container-fluid" > 
    <!-- style="height: 90%; width: 60%; float:left;" height="100%" width="49%" align="left" --> 
    <div class="youtube-video" id="video"> 
    <!-- for live video --> 
    <iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2F1277805348996425%2Fvideos%2F<?php echo $liveID; ?>%2F&show_text=0&width=476" width="476" height="476" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe> 
    <!-- <iframe class="embed-responsive-item" src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2F<?php echo $liveID; ?>%2Fvideos%2F1277978488979111%2F&show_text=1&width=560" width="560" height="475" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe> --> 
    <!-- <iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2F1277805348996425%2Fvideos%2F1278782988898661%2F&show_text=1&width=560" width="560" height="475" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe> --> 
    <!-- for embbedded facebook video (test purposes) --> 
    <!-- <iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2FDota2BestYolo%2Fvideos%2F<?php echo $liveID; ?>%2F&show_text=1&width=560" width="560" height="451" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe> --> 

    <!-- youtube embed video --> 
    <!-- <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/live_stream?channel=UCJaiEVEFaen5QC28rJp0fEw"></iframe> --> 
    </div> 

    <div class="chat row" > 
    <div id="messages" class="chat-area"></div> 
     <?php 
      if (loggedin()) { ?> 
       <table> 
        <tr> 
        <td> 
         <textarea style="padding: 10px;" rows="3" cols="50" class="entry row" placeholder="Type your message here..." name="msg" id="txtBox"></textarea> 
        </td> 
        </tr> 
       </table> 
       <?php } else { ?> 
        <table> 
        <tr> 
        <td style="width: 400px;"> 
         <textarea style="" id="message" rows="3" cols="50" class="entry row" placeholder="Type your message here..." name="msg"></textarea> 

         <!-- Modal --> 
         <div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> 
          <div class="modal-dialog" role="document"> 
          <div class="modal-content"> 
           <div class="modal-header"> 
           <h5 class="modal-title" id="exampleModalLabel">Please Login</h5> 
           <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
            <span aria-hidden="true">&times;</span> 
           </button> 
           </div> 
           <div class="modal-body"> 
           <p>You must first login before you can join the conversation.</p> 
           </div> 
           <div class="modal-footer"> 
           <input type="button" class="btn btn-primary" value="Login" onclick="location.href='login.html'"/> 
           <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button> 
           </div> 
          </div> 
          </div> 
         </div> 
        </td> 
       </tr> 
       </table> 
      <?php } ?> 
</div> 

</div><!-- end of container --> 

enter image description here これは私が達成したいものです。

enter image description here これは私が得ているものです。

Answer 1

flex-wrap CSSプロパティを使用すると、ジョブを完了できます。 Video要素とChat要素の両方を含む親要素にflex-wrapプロパティを適用します。

このページのデモをご覧になり、https://css-tricks.com/almanac/properties/f/flex-wrap/の動作を確認してください。ブラウザの画面サイズを変更して、黄色のタイルが適切に折り返されていることを確認します。

Answer 2

flexboxを使用して解決できます。小さい画面ではチャットを得るにはflex-wrap: wrapを使用し、ビデオのサイズを小さくしないようにするにはflex-shrink: 0を使用してください。

このスニペットを実行して理解してください。

.parent { 
 
    width: 100%; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    background-color: yellow; 
 
} 
 

 
.video { 
 
    flex-shrink: 0; 
 
    background-color: red; 
 
    width: 200px; 
 
} 
 

 
.chat { 
 
    width: 100px; 
 
    background-color: orange; 
 
    flex-shrink: 0; 
 
}

<div class="parent"> 
 
    <div class="video"> 
 
    VIDEO 
 
    </div> 
 
    <div class="chat"> 
 
    CHAT 
 
    </div> 
 
</div>

ことができますなら、私に教えてください。

Answer 3

私はあなたのレイアウトにブートストラップ4を使用していると仮定してあなたの質問に答えます。 BSのレスポンシブなレイアウトを使用するのは簡単です。ここではあなたが試すことができますコードは次のとおりです。

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <!-- Required meta tags --> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
 

 
    <!-- Bootstrap CSS --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> 
 
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> 
 
</head> 
 

 
<body> 
 
    <div class="container-fluid"> 
 
     <h1>Sample testing</h1> 
 
     <div class="row"> 
 
      <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12"> 
 
       <div class="embed-responsive embed-responsive-16by9"> 
 
        <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe> 
 
       </div> 
 
      </div> 
 
      <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12"> 
 
       <div class="container"> 
 
        <p>Your chat component will come here.</p> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</body> 
 

 
</html>