div并排移动响应问题

Question

我有一个 html 代码，我想并排显示多个 div，但每行不超过 2 个所以我让它在桌面上完全按照我想要的方式运行，但移动设备似乎无法正常工作，它们看起来太小，div 包含一系列信息图表。

我知道 .float-child 宽度 50% 也定义了它的移动尺寸，但我不知道此时如何设置响应。

我将不胜感激任何意见或建议！谢谢！

 <!DOCTYPE html>
<html>
   <head>
      <title></title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link href="https://fonts.googleapis.com/css2?family=Noto+Sans&family=Oswald:wght@300;500&display=swap" rel="stylesheet">
      <style>
         .infogram-embed{
         border-style: solid;
         border-width: 1px;
         border-color:#C0C0C0;
         border-radius: 15px;
         overflow:hidden;
         position:relative;
         padding: 25px 0px 0px 3px;
         }
         h1 {
         padding: 25px 1px 1px 1px;
         font-family: 'Noto Sans', sans-serif!important;
         }
         .float-container {
         padding: 20px;
         
         position: relative;
         height:0;
         
       
         }
         .float-child {
         width: 50%;
         float: left;
         padding: 20px;
        
         } 
  
       

         



      </style>
   </head>
   <body>
      <div class="float-container">
      <div class="float-child">
         <div class="izquierda">
            <h1 style=font-size:20px>title1</h1>
            <div  
               class="infogram-embed"
               data-id=""
               data-type="interactive"
               data-title="title1"
               > </div>
         </div>
      </div>
      <div class="float-child">
         <div class="derecha">
            <h1 style=font-size:20px>title2</h1>
            <div
               class="infogram-embed"
               data-id=""
               data-type="interactive"
               data-title="title2"
               ></div>
         </div>
      </div>
      <div class="float-child">
         <div class="izquierda">
            <h1 style=font-size:20px>title 3</h1>
            <div
               class="infogram-embed"
               data-id=""
               data-type="interactive"
               data-title="title 3"
               ></div>
         </div>
      </div>
      <div class="float-child">
         <div class="derecha">
            <h1 style=font-size:20px>title4</h1>
            <div
               class="infogram-embed"
               data-id=""
               data-type="interactive"
               data-title="title 4"
               ></div>
         </div>
      </div>
  
    

<script>
  **/here goes js code which calls data for infographics/**
</script>

</body>
</html>

Answer 1

对于您的情况，最简单的解决方案可能是使用媒体查询。无论你想要它看起来像什么尺寸，你都可以调整宽度。

我将屏幕设置为在移动设备上覆盖 75%，但您可以更改它。

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans&family=Oswald:wght@300;500&display=swap" rel="stylesheet">
  <style>
    .infogram-embed {
      border-style: solid;
      border-width: 1px;
      border-color: #C0C0C0;
      border-radius: 15px;
      overflow: hidden;
      position: relative;
      padding: 25px 0px 0px 3px;
    }
    
    h1 {
      padding: 25px 1px 1px 1px;
      font-family: 'Noto Sans', sans-serif!important;
    }
    
    .float-container {
      padding: 20px;
      position: relative;
      height: 0;
    }
    
    .float-child {
      width: 50%;
      float: left;
      padding: 20px;
    }
    
    @media screen and (max-width:500px) {
      .float-child{
        width: 75%
      }
    }
  </style>
</head>

<body>
  <div class="float-container">
    <div class="float-child">
      <div class="izquierda">
        <h1 style=font-size:20px>title1</h1>
        <div class="infogram-embed" data-id="" data-type="interactive" data-title="title1"> </div>
      </div>
    </div>
    <div class="float-child">
      <div class="derecha">
        <h1 style=font-size:20px>title2</h1>
        <div class="infogram-embed" data-id="" data-type="interactive" data-title="title2"></div>
      </div>
    </div>
    <div class="float-child">
      <div class="izquierda">
        <h1 style=font-size:20px>title 3</h1>
        <div class="infogram-embed" data-id="" data-type="interactive" data-title="title 3"></div>
      </div>
    </div>
    <div class="float-child">
      <div class="derecha">
        <h1 style=font-size:20px>title4</h1>
        <div class="infogram-embed" data-id="" data-type="interactive" data-title="title 4"></div>
      </div>
    </div>



    <script>
      ** /here goes js code which calls data for infographics/ **
    </script>

</body>

</html>

Answer 2

将 Bootstrap CDN link 添加到此处提供的 html 文件 link 的头部 https://www.bootstrapcdn.com/ after that utilize the bootstrap grid system info here https://getbootstrap.com/docs/4.0/layout/grid/ 所以只需添加 class 'col-xs-12' 到您的 'float-container' div 然后为每个 'float-child' div 添加 class 'col-xs-6'

div并排移动响应问题

divs side by side mobile responsive issue

html

css

resize

responsive