我正在使用媒体查询,并试图了解有关响应式设计的更多信息。
媒体查询css
@media screen
and (max-width: 480px){
#header .left {
float:none;
width:100%;
height: 100%;
}
#header .left img{
margin:0%;
width:100%;
height:auto;
}
#header .right {
float:none;
width:100%;
height:100%;
clear:both;
}
}
我的常规css看起来像是:
#header .left{
width:17.95833335%;
float:left;
}
#header .left img{
margin:0%;
max-width:100%;
max-height:100%;
-moz-border-radius:5px 20px 5px; -webkit-border-radius:5px 20px 5px; border-radius:5px 20px 5px;
}
#header .right{
width:79.95833335%;
max-height:100%;
min-height:100%;
margin:0% 1%;
/*background-color: red;*/
background:
linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px,
linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px,
linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px,
linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px,
linear-gradient(90deg, #1b1b1b 10px, transparent 10px),
linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
background-color: #131313;
background-size: 20px 20px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
float:right;
}
HTML
<div class="left">
<img src="{{ url_for('static', filename='my_pic.jpg') }}" alt="My Pic" />
</div><!--left-->
<div class="right">
<h2>
Test test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test</h2>
</div><!--right-->
我希望右侧的黑色区域(.right
)向下移动,左侧的图像(.left
)占据整个屏幕。
我怎样才能做到这一点?
由于
答案 0 :(得分:0)
您可以在图片width:100%
和clear:both
处进行操作,使黑色文本框位于图片下方。
如果你能提供html它可能会有所帮助。
- 编辑 -
正如我所说的左侧课程中的width:100%
和clear:both
一样,将为您完成工作。
答案 1 :(得分:0)
您的#header .left img
规则包含max-width: 100%
,但您想要的内容必须为width: 100%
(和height: auto
)