让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属性完成工作。将flex-wrap属性应用于包含Video和Chat元素的父元素。

试试看看这个页面上的演示https://css-tricks.com/almanac/properties/f/flex-wrap/看看它是如何工作的。调整浏览器屏幕大小，以查看相应的黄色瓷砖。

Answer 2

您可以使用flexbox来解决这个问题。使用flex-wrap: wrap可以在较小的屏幕上获得底部的聊天，并且不会让视频缩小其大小。

运行此片段了解。

.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

我会回答你的问题，假设你使用Bootstrap 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>