html - css - 网格 div 2x2 居中但在较小的屏幕上变为 1x4

Question

你好，这让我很生气，谁能帮忙。我想要一个 2x2 的 div 网格，在大屏幕上居中，但在较小的屏幕上查看时移动到 1x4，但仍然居中。到目前为止我有这个它可以工作但是在小的 1x4 View 上左对齐。我已经尝试使用内联 block 而不是 float:left，但是您无法使用 #frame-block 添加任何其他内容。宽度必须固定为 500px

#frame-block {
width: 500px;
border: 2px #0066FF solid;
margin:5px;
height:400px;
float:left;
}


#frame-container {
  text-align: center;
}

#frame-main {
  display: inline-block;
  vertical-align: middle;
}​

<div id="frame-container">

  <div id="frame-main">

     <div id="frame-block"></div>
      <div id="frame-block"></div>

    </div>

</div>

Answer 1

给你:http://dabblet.com/gist/3734237 .

一个您的问题是重复使用 ID。 ID 是唯一的，每页只能使用一次。这里有更多关于它的阅读:http://csswizardry.com/2011/09/writing-efficient-css-selectors/ .

在我对您的代码的修改中，我将 ID 更改为类，将 .frame-block 设置为“display: inline-block”而不是“float: left”。

我建议使用相对单位而不是像素单位，这样您只需更改“主体”上的基本字体大小即可适应小于 500 像素的较小屏幕。您可以在这里阅读更多相关信息:http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/