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链接添加到此处https://www.bootstrapcdn.com/所提供的html文件链接的头部，然后利用此处https://getbootstrap.com/docs/4.0/layout/grid/的引导网格系统信息，因此只需将类'col-xs-12'添加到您的'float -container'div，然后为每个“ float-child” div添加类“ col-xs-6”

div并排移动响应问题

2 个答案: