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

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;
}

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

更新:

您的元素分成三组的原因是它们在代码中针对常规屏幕尺寸的分组方式。

我的建议:

1. 删除负责 3 项分组的 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 }
}

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