响应式图像网格 - 3个图像，1个左2个右侧堆叠

Question

好的，所以我在这里： http://www.discountramps.com/powersport-products/c/BRAND-BW/

到目前为止，感谢您的帮助。我的百分比或其他东西似乎有些不对劲。当我调整浏览器大小时，图像会中断。我希望他们只是缩放，直到它达到媒体查询。这有什么意义吗？

再次感谢您的帮助！ - 艾伦

Answer 1

以下是您问题的可能布局，现在可以使用它。

＆＃13;

＆＃13;

/Users/kaichristensen/Dropbox/Kai/Stockfighter/level_three_selling.rb:45:in `+': nil can't be coerced into Fixnum (TypeError)
from /Users/kaichristensen/Dropbox/Kai/Stockfighter/level_three_selling.rb:45:in `block in getAverage'
from /Users/kaichristensen/Dropbox/Kai/Stockfighter/level_three_selling.rb:43:in `each'
from /Users/kaichristensen/Dropbox/Kai/Stockfighter/level_three_selling.rb:43:in `getAverage'
from /Users/kaichristensen/Dropbox/Kai/Stockfighter/level_three_selling.rb:64:in `block in <main>'
from /Users/kaichristensen/Dropbox/Kai/Stockfighter/level_three_selling.rb:62:in `each'
from /Users/kaichristensen/Dropbox/Kai/Stockfighter/level_three_selling.rb:62:in `<main>'

＆＃13;

/*colors*/

.black {
  background: black
}
.red {
  background: red
}
.green {
  background: green
}
/*layout*/

.black,
.sidebar {
  float: left;
  width: 50%;
  height: 100vh
}
.red,
.green {
  height: 50vh
}
/* responsive */

@media screen and (max-width: 480px) {
  .black,
  .sidebar {
    width: 100%;
    float: none
  }
}

＆＃13;

＆＃13;

＆＃13;