更改响应式div显示

Question

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

粉红色和绿色的块被包裹在div中，但我无法继续：s 有帮助吗？

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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应用于不同的元素，则使用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>

Answer 2

<style>
@media (max-width:600px){
#pink,#green{
display:inline;
}
}
</style>

如果窗口小于600px，则会更改显示粉红色和绿色的值。 Google Css Media会查询更多信息。 你需要设置

*{margin:0px}

因为200px + 200px +边距不是400px

Answer 3

您可以使用media queries并在内部float: left DEMO上设置div

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

您也可以在display: flex上使用#wrapper，但需要使用!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>