我正在努力实现一些我确信应该比我现在做的更容易的事情!
我正在使用 Skeleton 响应式框架,到目前为止一切都很好。
这是我想要实现的目标的图表。
这将被放置在一列中。一旦该列的大小减小,我希望它按照图中的第二个示例堆叠 div。我尝试了几种不同的方法,但总是出错。
我对 HTML/CSS 还很陌生,所以非常感谢您的帮助!非常感谢!
你可以使用CSS3媒体查询为了这。像这样写:
CSS
.wrapper {
border : 2px solid #000;
overflow:hidden;
}
.wrapper div {
min-height: 200px;
padding: 10px;
}
#one {
background-color: gray;
float:left;
margin-right:20px;
width:140px;
border-right:2px solid #000;
}
#two {
background-color: white;
overflow:hidden;
margin:10px;
border:2px dashed #ccc;
min-height:170px;
}
@media screen and (max-width: 400px) {
#one {
float: none;
margin-right:0;
width:auto;
border:0;
border-bottom:2px solid #000;
}
}
HTML
<div class="wrapper">
<div id="one">one</div>
<div id="two">two</div>
</div>
检查此以了解更多信息http://jsfiddle.net/cUCvY/1/ http://jsfiddle.net/cUCvY/1/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)