具有相同宽度和高度的响应div在小型媒体屏幕上移动到新线

时间:2015-08-12 07:53:42

标签: html css css3

我正在尝试实现一个包含图像的响应div,而当它们在更大尺寸的屏幕上时,多个div应该具有相同的大小,而在更小的屏幕上,宽度应该是自动调整的,并且它们应该在新行上一个 ,我的问题是第二个div宽度与在较大屏幕上拉伸的第一个div宽度不同 Js Fiddel
例: enter image description here 的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>

1 个答案:

答案 0 :(得分:0)

更新此css

&#13;
&#13;
.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;
&#13;
&#13;

需要在width: 50% div

上设置#one