Question

你好，这让我很生气，任何人都可以提供帮助。我想要一个以大屏幕为中心的div 2x2网格，但是当在较小的屏幕上观看时，移动到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>

Answer 1

如何使用media queries在某个分辨率上使#frame-block宽两倍？

Answer 2

在这里：http://dabblet.com/gist/3734237。

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

在我对代码的修改中，我将ID更改为类，给了.frame-block'display：inline-block'而不是'float：left'。

我建议使用相对单位而不是像素单位，这样您只需要更改“正文”上的基本字体大小，以适应低于500px的较小屏幕。您可以在此处详细了解：http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/

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

2 个答案: