更改响应式 div 显示

Question

目前，我有3个简单的方块：一个大的黑色方块，旁边是一个较小的粉红色方块，粉红色下面是绿色方块。我想要的是，在调整大小时，粉色块和绿色块在同一条线上。

粉红色和绿色块被包裹在 div 中，但我不能再继续了:s 有什么帮助吗？

<div id="BLACK" style="background:#000;width:400px; height:500px;display:inline-block"></div>
<div id="WRAPPER" style="display:inline-block;">
  <div id="PINK" style="background: #f0c; width:200px; height:250px; display:block"></div>
  <div id="GREEN " style="background: #0f0; width:200px; height:250px; display:block"></div>
</div>

Fiddle of actual code

Answer 1

您可以使用 media queries 并在内部 div 的 DEMO

上设置 float: left

@media(max-width: 620px) {
  div div {
    float: left;
  }
}

<div id="chart_div1" style="background:#000;width:400px; height:500px;display:inline-block"></div>
<div style="display:inline-block;">
  <div style="background: #f0c; width:200px; height:250px; display:block"></div>
  <div style="background: #0f0; width:200px; height:250px; display:block"></div>
</div>

您也可以在 #wrapper 上使用 display: flex，但您需要使用 !important 来覆盖内联样式。

@media(max-width: 620px) {
    #WRAPPER {
      display: flex !important;
    }
}

<div id="chart_div1" style="background:#000;width:400px; height:500px;display:inline-block"></div>
<div id="WRAPPER" style="display:inline-block;">
  <div style="background: #f0c; width:200px; height:250px;"></div>
  <div style="background: #0f0; width:200px; height:250px;"></div>
</div>

Answer 2

处理 HTML 结构的响应时使用媒体查询。它们用于在不同的屏幕尺寸上应用不同的 css。您可以从 [http://www.w3schools.com/cssref/css3_pr_mediaquery.asp].

了解更多信息

您可以添加这个 css 以便在较小的屏幕上处理它：

<style>
    @media only screen and (min-width: 481px) and (max-width: 980px){
      #WRAPPER { display: block !important;  }
      .smaller { display: inline-block !important; }
    }
</style>

将 smaller class 应用于 ID 为 GREEN 和 PINK 的 div。如果将相同的 css 应用于不同的元素

，则使用 class

您的代码现在是：

    <div id="BLACK" style="background:#000;width:400px; height:500px;display:inline-block"></div>
            <div id="WRAPPER" style="display:inline-block;">
            <div class="smaller" id ="PINK" style="background: #f0c; width:200px; height:250px; display:block"></div>
            <div class="smaller" id="GREEN "style="background: #0f0; width:200px; height:250px; display:block"></div>
        </div>

<style>
        @media only screen and (min-width: 481px) and (max-width: 980px){
          #WRAPPER { display: block !important;  }
          .smaller { display: inline-block !important; }
        }
    </style>

更改响应式 div 显示

Change responsive div display

css

responsive