我想要左浮动 div 来调整移动设备上的宽度

Question

任何人都可以告诉为什么 <div> 宽度不会随着屏幕尺寸的变化而调整为 48% 吗？是因为我用过position: relative;吗？

CSS:

.wrap {
  width: 24%;
  background: white;
  margin: 15px;
  padding: 10px;
  float: left;
  display: inline-block;
  overflow: hidden;
  position: relative;
}

@media(max-width: 580px){
  width: 48%;
}

Answer 1

好像你只是忘记了媒体查询中的 .wrap 和花括号：

@media(max-width: 580px) {
  .wrap {
    width:48%;
  }
}

另请参阅these examples了解如何标记媒体查询。

Answer 2

解决您的问题

@media(max-width: 580px){
  .wrap{
  width:48%;
  }
 }

https://jsfiddle.net/11opj4nq/

Answer 3

您好，请记住移动优先:)。好的做法是覆盖较大设备中的代码。

.wrap {
 width: 48%;
 background: white;
 margin: 5px;
 padding: 10px;
 float: left;
 display: block;
 overflow: hidden;
 position: relative;
}

@media screen and (min-width: 580px) {
  .wrap {
    width: 24%;
    margin: 15px; 
  }
}

我想要左浮动 div 来调整移动设备上的宽度

I want the floating left div's to adjust width on mobile devices

html

css

media-queries