根据设备/屏幕尺寸水平/垂直堆叠div

Question

我遇到过这个问题，其中我的划分如下：

这基本上是一个较大问题的一小部分，通过了解以下工作原理，我计划解决一个更大的问题。

从上图中可以看出，我有两个较小的分区，每个分区占据较大分区的一半高度。但是，在平板电脑中，我希望它们能够并排。

这可以通过使用Bootstrap或其他框架轻松解决，但我提出这个问题的动机是了解如何从头开始完成它的基础知识，更重要的是理解核心概念。

我去了，这是我的尝试JSFiddle

以下是我提出的代码：

<div class="container">
<div class="largeImage">  
  <img src="http://lorempixel.com/745/292/sports/" alt="large">
</div>

<div class="smallImages">
  <img src="http://lorempixel.com/214/145/sports/" alt="large">
  <img src="http://lorempixel.com/214/145/sports/" alt="large">
</div>

.largeImage{
  max-width:740px;
  height:auto;
  width:100%;
  display:inline-block;
  clear:both;
}

.largeImage img{
  width:100%;
}

.smallImages{
  background-color:lightgray;
  display:inline-block;
  max-width:210px;
}
.smallImages img{
  width:100%;
  height:auto;
}
.container{
  background-color:whitesmoke ;
  max-width:960px;
  width:auto;
  margin:0 auto;
}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {

  body{
    background-color:green;
  }

  .smallImages{
    width:100%;

  }

  .smallImages img{
    display:inline-block;
    float:left; 
    clear:both;
  }
  .largeImage{
   min-width:100% !important; 
  }
}

我不知道我是否过于复杂。但我希望有人能在这里为我澄清一下。

说出我的问题： 如何在不使用任何框架的情况下如上图所示堆叠分区，以及在我的尝试中需要纠正哪些内容？

Answer 1

这是怎么回事：http://jsfiddle.net/josephspens/pNVFw/

HTML

<div class="container">
    <img src="http://lorempixel.com/745/365/sports/" alt="large"/>
    <img src="http://lorempixel.com/214/145/sports/" alt="large"/>
    <img src="http://lorempixel.com/214/145/sports/" alt="large"/>
</div>

CSS

img {
  width: 100%;
  float: left;
  display: block;
  margin-bottom: 1em;
}

@media screen and (min-width: 20em) and (max-width: 30em) {
  img {
      width: calc(50% - 0.5em);
  }
  img:first-child {
      width: 100%;
  }
  img:nth-of-type(2n+2) {
      margin-right: 1em;
  }
}

@media screen and (min-width: 30em) {
  img {
      width: 25%;
  }
  img:first-of-type {
      width: calc(75% - 1em);
      margin-right: 1em;
  }
}

Answer 2

可以修改屏幕尺寸，但以下是如何执行此操作的基本示例： http://jsfiddle.net/4cucC/1/

@media only screen and (max-width: 768px) {
  .smallImages{
      max-width:100%;
  }
   .smallImages img{
      max-width: 210px;
   }
}