1

你好，这让我发疯了，谁能帮忙。我想要一个以大屏幕为中心的 2x2 div 网格，但在小屏幕上查看时会移动到 1x4 但仍居中。到目前为止，我有这个工作，但在小 1x4 视图上左对齐。我尝试过使用 inline-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>
4

2 回答 2

1

如何使用媒体查询在某个分辨率上使#frame-block两倍宽？

于 2012-09-16T19:55:26.847 回答
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/

于 2012-09-16T20:37:54.893 回答