Question

我试图将我的wordpress网站转换为响应式。问题是内容（也是右侧边栏）没有对齐，以较小的屏幕尺寸为中心。

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

我使用的代码：

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

我的理由：花车在较小的屏幕尺寸上导致布局出现问题。

更新

您的商品分组为三个的原因是因为它们是如何在常规屏幕尺寸的代码中分组的。

我的建议：

删除负责3项分组的DIV。
#content（left）DIV中的所有项目都应float: left。
使用#content DIV将内容集中在页面上。
使用媒体查询通过定义项目应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 }
}

这只是一个粗略的例子，指出你正确的方向。它并不意味着被复制粘贴为工作解决方案。

帖子未对齐以缩小屏幕尺寸为中心

1 个答案:

更新