使用 css 媒体查询使第三个 inline-block div 高于前两个（没有 bootstrap）

Question

我有三个彩色 HTML div 标签显示 inline-block 像这样：

仅使用 CSS，我想通过媒体查询进行响应，使蓝色 div 实际上高于红色和绿色。期望的结果将如下所示：

我写了以下HTML。正如预期的那样，我的输出是蓝色 div 漂浮在绿色和红色下方。如何通过修改上面 HTML?

中的 CSS 将蓝色堆叠在顶部

<html>
<head>
  <style>
    div { height: 10%; }
    #red { width: 300px; background-color: red; display: inline-block; }
    #green { width: 300px; background-color: green; display: inline-block; }
    #blue { width: 300px; background-color: blue; display: inline-block; }
    @media screen and (max-width: 940px) {
      #red { width: 49%; }
      #green { width: 49%; }
      #blue { width: 100%; float: left; }
    }
  </style>
</head>
<body>
  <div id="container">
    <div id="red"></div>
    <div id="green"></div>
    <div id="blue"></div>
  </div>
</body>
</html>

编辑： divs 的高度是动态的，因此修改边距以强制在顶部显示蓝色并不是我真正想要的解决方案。

编辑： 根据 MDN，Safari 不支持弹性框。所以 flex box 不是一个选项。

Answer 1

我想这可行……但前提是您知道元素的高度:) :

* {
    padding: 0;
    margin: 0;
}

div {
    height: 50px;
}

#red {
    width: 300px;
    background-color: red;
    display: inline-block;
}

#green {
    width: 300px;
    background-color: green;
    display: inline-block;
}

#blue {
    width: 300px;
    background-color: blue;
    display: inline-block;
}

@media screen and (max-width: 940px) {
    #red {
        margin-top: 50px;
        width: 49%;
    }

    #green {
        margin-top: 50px;
        width: 49%;
    }

    #blue {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }
}

Fiddle : http://jsfiddle.net/nj8sfnhb/1/

Answer 2

div { height: 50px; }
#red, #green, #blue{width: 300px;display: inline-block;} 

#red, #green{width: 49%}
#red { background-color: red;}
#green { background-color: green;}
#blue { 
    background-color: blue; 
    width: 100%;
}

@media screen and (max-width: 940px) {
    #blue { float: right}
    #red, #green,#blue{width: 32.9%;}
}

<div id="container">
    <div id="blue"></div>
    <div id="red"></div>
    <div id="green"></div>
</div>

更新：

div { height: 50px; }
#red, #green, #blue{width: 300px;display: inline-block;} 

#red, #green,#blue{width: 32.9%;}

#red { background-color: red;}
#green { background-color: green;}
#blue { 
    background-color: blue; 
    float: right
}

@media screen and (max-width: 940px) {
    #blue { width: 100%}
    #red, #green{width: 49%; margin-top: 4px}
}

<div id="container">
    <div id="blue"></div>
    <div id="red"></div>
    <div id="green"></div>
</div>

Answer 3

如果你可以稍微修改你的 html 来源（当然你的 div 的顺序没有改变）那么它是可行的：

div { height: 50px; }

.helper { width: 600px; display: inline-block;}

#red { width: 300px; background-color: red; display: inline-block; }
#green { width: 300px; background-color: green; display: inline-block; }
#blue { width: 300px; background-color: blue; display: inline-block; }

@media screen and (max-width: 940px) {

    #container   { display: table; width: 100% }
    .helper  { display: table-footer-group; }
    #blue { display: table-header-group; width: 100%; }
    
    
    #blue { 
        height: 25px;  
        /* proof that it can be different than the height of other divs */
    }
    #red { width: 50%; }
    #green { width: 50%; }
}

  <div id="container"><!-- 
       stripping whitespace
    --><div class="helper"><!--
        --><div id="red">test</div><!--
        --><div id="green">test</div><!--
    --></div><!--
    --><div id="blue">test</div><!--
  --></div>

Answer 4

在正常状态下反转内联块的顺序（通过使用 float right）比启用媒体查询后要求发生的事情更容易。显然，这只是一个解决方案，如果您能够反转彩色区域的顺序（即它们的级联顺序对页面没有意义，例如 SEO 或出于可访问性原因），并且浮动权利最终不会导致您出现问题您页面上的其他地方。

NOTE: The float left on the #container is used to force the regions not to jump to the right side of the page, but there are other ways of achieving this depending on the context of the rest of the page.

html, body { height: 100%; }
#container { height: 100%; float:left; }
#container > div { height: 10%; }

#red { width: 300px; background-color: red; display: inline-block; float: right; }
#green { width: 300px; background-color: green; display: inline-block; float: right; }
#blue { width: 300px; background-color: blue; display: inline-block; float: right; }

@media screen and (max-width: 940px) {
  #container { float: none; }
  #red { width: 50%; display: block; }
  #green { width: 50%; display: block; }
  #blue { width: 100%; display: block; clear: both; float: left; }
}

<div id="container">
  <div id="blue"></div>
  <div id="green"></div>
  <div id="red"></div>
</div>

使用 css 媒体查询使第三个 inline-block div 高于前两个（没有 bootstrap）

Make the third inline-block div rise above the first two with a css media query (no bootstrap)

html

css

responsive-design