帖子未对齐以在较小的屏幕尺寸上居中

Question

我正在尝试将我的 wordpress 网站转换为响应式网站。问题是内容（也是右侧边栏）未对齐到较小屏幕尺寸的中心。

以下是一些说明问题的图片：

• On regular size
• On smaller size (smartphone)

我正在使用的代码：

#casing {
width: 100%;
max-width: 1000px;
padding: 0px 0px 30px 0px;
margin: 0px auto;
}

#content {
width: 100%;
max-width: 700px;
margin-top: 20px;
float: left;
}

#right {
width: 100%;
max-width: 270px;
float: right;
margin-top: 20px;
}

我该如何解决这个问题，所以无论大小如何，内容都会居中？

Answer 1

如果没有工作示例，我建议您将以下内容添加到您的媒体查询中以获得较小的屏幕尺寸：

#content,
#right {
  margin: 20px auto 0;
  float: none;
}

我的推理：浮动会导致您在较小屏幕尺寸上的布局出现问题。

更新：

您的项目分成三组的原因是因为它们在常规屏幕尺寸的代码中是这样分组的。

我的建议：

1. 删除负责 3-item-grouping 的 DIV。
2. 所有项目都应在#content（左）DIV 内float: left。
3. 使用#content DIV 使页面内容居中。
4. 使用媒体查询通过定义项目何时应该clear: left来控制视觉组。

第 4 点示例：

@media (max-width:699px){
  #content{
    float: none;
    margin: 20px auto 0;
    width: 480px;
  }
}
@media (max-width:479px){
  .item-class { float: none }
  #content { width: 320px }
}
@media (min-width:480px) and (max-width:699px){
  /* The 1st item of every 2 items in the stack will break the flow */
  .item-class:nth-child(2n+1) { clear: left }
  #content { width: 480px }
}
@media (min-width:700px){
  /* 3-item grouping */
  .item-class:nth-child(3n+1) { clear: left }
}

这只是一个粗略的例子，可以为您指明正确的方向。它并不意味着作为一个有效的解决方案被复制粘贴。