css - 更改响应式 div 显示

Question

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

粉红色和绿色 block 被包裹在一个 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

媒体查询用于处理 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 类应用于 ID 为 GREEN 和 PINK 的两个 div。如果相同的 css 应用于不同的元素，则使用类

你的代码现在是:

    <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>