div并排移动响应问题答案

【问题标题】：divs side by side mobile responsive issuediv并排移动响应问题
【发布时间】：2020-06-09 23:30:23
【问题描述】：

我有一个 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>

【问题讨论】：

标签： html css resize responsive

【解决方案1】：

将 Bootstrap CDN 链接添加到此处提供的 html 文件链接的头部 https://www.bootstrapcdn.com/ 之后使用此处的引导网格系统信息 https://getbootstrap.com/docs/4.0/layout/grid/ 所以只需将类 'col-xs-12' 添加到您的 'float-container' div然后为每个 'float-child' div 添加类 'col-xs-6'

【讨论】：

谢谢！ bleepbloopblop123 我添加了 boostrap 然后简单地使用

对于每个 div，它都是这样工作的。
我的意思是 class="row" 然后 class="col12..." 每个 div

【解决方案2】：

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

我将屏幕设置为在移动设备上覆盖 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>

【讨论】：

也许您正在尝试制作响应式原始 HTML...我不知道...但是由于我是 Bootstrap 爱好者，如果您愿意，我会提出建议不懂Bootstrap，又想搭建响应式页面，建议大家试试。但是media queries 会成功的！
你是在说乔尼·柯里昂，对吧？我有点困惑:)
嗨.. Bootstrap，在我看来，它是使用 HTML、CSS 和 bootstrap 中的类构建响应式页面的更简单方法。你可以试试getbootstrap.com/docs/4.0/getting-started/introduction