Question

当屏幕宽度不足时，我想将红色区域放在黄色和绿色块下面。
我无法像 Wordpress 主题那样做同样的事情＆＃34;十四＆＃34; ：

默认情况下：

当我们调整窗口大小时，2个标题会低于之前的位置：

我的尝试：红色区域应低于黄色和绿色块：

在＆＃34;十四＆＃34;主题，块在＆＃34;显示：块＆＃34;模式，我试着清楚：两者都没有用。

代码：

<!doctype html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>title</title>
        <style>
            #container {
                position:relative;
                background-color:black;
                width: 100%;
                min-height: 50px;
            }
            .titres {
                display:block;
                background-color: red;
                float:right;
            }
            .search {
                position:absolute;
                top :0;
                right:0;
                height:48px;
                line-height: 48px;
                background-color: green;
            }
            .lignes {
                display:none;
                background-color: blue;
                height:48px; line-height:48px;
                position:absolute;
                top:0; right:0;
                color:white;
            }
            ul, li {
                text-decoration: none;
                padding:0;
                padding-right: 20px;
                display:inline-block;
            }
            @media screen and (max-width: 500px){
                .search {
                    background-color: yellow;
                    margin-right: 38px;
                }
                .lignes {
                    display:block;
                }
                .titres {
                    vertical-align: baseline;
                }
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div class="lignes">lignes</div>
            <div class="titres">
            <ul>
                <li><a href="#">MAPAGE TITRE</a></li>
                <li><a href="#">PAGE D'EXEMPLE</a></li>               
            </ul>
            </div>
            <div class="search">search</div>
        </div>
    </body>
</html>

Answer 1

这是你在找什么？

http://codepen.io/xvariant/pen/EPRdye

#container {
  position: relative;
  background-color: black;
  width: 100%;
  min-height: 50px;
}
.titres {
  position: relative;
  display: block;
  background-color: red;
  float: right;
}
.search {
  position: relative;
  float: right;
  top: 0;
  right: 0;
  height: 48px;
  line-height: 48px;
  background-color: green;
}
.lignes {
  display: none;
  background-color: blue;
  height: 48px;
  line-height: 48px;
  position: absolute;
  top: 0;
  right: 0;
  color: white;
}
ul,
li {
  text-decoration: none;
  padding: 0;
  padding-right: 20px;
  display: inline-block;
}
@media screen and (max-width: 500px) {
  .search {
    background-color: yellow;
    margin-right: 38px;
  }
  ul {
    width: 100%;
  }
  li {
    display: block;
    widows: 100%;
  }
  .lignes {
    display: block;
  }
  .titres {
    vertical-align: baseline;
    width: 100%;
    clear: both;
  }
}

<div id="container">
  <div>
    <div class="lignes">lignes</div>

    <div class="search">search</div>
    <div class="titres">
      <ul>
        <li><a href="#">MAPAGE TITRE</a>
        </li>
        <li><a href="#">PAGE D'EXEMPLE</a>
        </li>
      </ul>
    </div>

  </div>
</div>
</body>

如何在媒体查询中将块放在其先前位置下方？

1 个答案: