我正在尝试实现一个包含图像的响应div,而当它们在更大尺寸的屏幕上时,多个div应该具有相同的大小,而在更小的屏幕上,宽度应该是自动调整的,并且它们应该在新行上一个
,我的问题是第二个div宽度与在较大屏幕上拉伸的第一个div宽度不同
Js Fiddel
例:
的CSS:
.wrapper {
border : 2px dotted #ccc; padding: 2px;
}
.wrapper div {
width: 100%;
min-height: 200px;
padding: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#one { background-color: gray; }
#two { background-color: blue; }
@media screen and (min-width: 600px) {
.wrapper {
height: auto; overflow: hidden; // clearing
}
#one { width: 200px; float: left; }
#two { margin-left: 200px; }
}
HTML:
<div class="wrapper">
<div id="one">one</div>
<div id="two">two</div>
</div>
答案 0 :(得分:0)
更新此css
.wrapper {
border : 2px dotted #ccc; padding: 2px;
}
.wrapper div {
width: 100%;
min-height: 200px;
padding: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#one {
background-color: gray;
}
#two {
background-color: blue;
}
@media screen and (min-width: 600px) {
.wrapper {
height: auto; overflow: hidden; // clearing
}
#one { width: 50%; float: left; }
#two { margin-left: 200px; }
}
&#13;
需要在width: 50%
div
#one