如何使用css将三列布局转换为两列布局，将两列布局转换为一列

Question

https://docs.google.com/document/d/1694Z1xMTKAkHwKheGzrViSRnr_EXno7XBl_Cf38Xrc0/pub

我正在使用特定设备的媒体规则。可以有人向我解释上述问题的逻辑。我创建了三个表，每个表都有一个列，并用图像和title填充单元格。我可以将这三个列转换为两个列，屏幕大小为1024x720。

Answer 1

3x2盒子，1024宽度，2x3盒子，1x6盒子用于小屏幕

http://output.jsbin.com/jecinulepu/14

  

HTML

<div id ="container">
<div class="box">
<span>title</span>
</div><div class="box">
<span>title</span>
</div><div class="box">
<span>title</span>
</div><div class="box">
<span>title</span>
</div><div class="box">
<span>title</span>
</div><div class="box">
<span>title</span>
</div>
</div>

  

CSS

#container {
  max-width:1024px;
  height:100%;
}

.box{
  width:300px;
  height:250px;
  background:grey;
  float:left;
  margin:10px;
  display:block;
  border:1px solid #999;
}

.box span {
  width:300px;
  height:50px;
  background:white;
  display:block;
  text-align:center;
  font-size:40px;
  margin-top:200px
}

/* Portrait */
@media 
  (max-device-width: 800px) 
  and (orientation: portrait) { 

  #container {
  max-width:800px;
  }
  }



/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {

  #container {
  max-width:480px;
  }

}

Answer 2

请尝试这种方法，

容器{

最大宽度：1,024;
  高度：100％;
}

.box的{
  宽度：300像素;
  高度：250像素;
  背景：灰色;
  浮动：左;
  余量：10px的;
  显示：块;
  border：1px solid＃999;
}

.box span {
  宽度：300像素;
  高度：50像素;
  背景：白色;
  显示：块;
  文本对齐：中心;
  字体大小：40像素;
  边距：200像素
}

/ *人像* /
@media
  （最大设备宽度：800px）
  和（方向：肖像）{

  #container {
  最大宽度：800像素;
  }

.box的{
  宽度：100％重要;！ }

}

/ *人像* /
@media only screen
  和（min-device-width：320px）
  和（最大设备宽度：480px）
  和（-webkit-min-device-pixel-ratio：2）
  和（方向：肖像）{

  #container {
  最大宽度：480像素;
  }

.box的{
  宽度：100％重要;
！ } }