当屏幕宽度不足时,我想将红色区域放在黄色和绿色块下面。
我无法像 Wordpress 主题那样做同样的事情"十四" :
默认情况下:
当我们调整窗口大小时,2个标题会低于之前的位置:
我的尝试:红色区域应低于黄色和绿色块:
在"十四"主题,块在"显示:块"模式,我试着清楚:两者都没有用。
代码:
<!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>
答案 0 :(得分: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>