Javascript 当屏幕变大时，Div向一侧浮动？

问题：内部Div（即

.service header box

）从内容布局的其余部分浮动

内容布局如下所示（基本视觉）：

关于

读者在查看页面布局时会被页面的可读内容分散注意力，这是一个早已确定的事实。重点，有时是故意的（注入的幽默）有时是故意的（注入的幽默等）
幽默。

标准的Lorem Ipsum通道，从16世纪开始使用
“知识本身是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德。”
除非偶尔出于不谨慎的原因，否则不应因工作过失而受到惩罚。”

尝试删除包装上的填充。维修完全放气，或在包装上放置相同的填充

编辑

如果您仍然希望包装的最大宽度为1400px，服务头框的最大宽度为1080px，那么就这样做

<style>
  .service-header-box{
    max-width: 1400px;
    margin: auto;
  }
  .service-header-box-content{
    position: relative;
    max-width: 1080px;
  }
</style>
<div class="service-header-box">
  <div class="service-header-box-content">
      <h2 class="entry-title">About</h2>
      <!-- Header Image In Service Page - Full bleed -->
      <div class="header-desc">
        <p>
          It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point, sometimes on purpose (injected humouretimes on purpose (injected humour and the like). etimes on purpose (injected
            humour.
        </p>
      </div>
  </div>
</div>

.服务标题框{
最大宽度：1400px；
保证金：自动；
}
.服务标题框内容{
位置：相对位置；
最大宽度：1080px；
}
关于

长期以来，读者在查看页面布局时会被页面的可读内容分散注意力，这是一个公认的事实。要点有时是故意的（注入的幽默有时是故意的（注入的幽默等）。有时是故意的（注入的幽默等
幽默。

---

对于遇到相同问题但两个元素宽度相同的人，如果在每个元素上应用了属性框大小：边框框（这是一个常见的用例）填充将是您的问题。这是我的第一个答案的原因，在您在宽度上添加其他信息之前。

Style

margin:auto

用于在容器内水平居中对齐元素

从

中删除
页边距：auto
。服务标题框

可确保

服务标题框

的内容左对齐，而与在浏览器中查看的页面大小无关

/* Service Page Feature Header container */

.service-header-box {
  max-width: 1084px;
  position: relative;
}

您的标题内容（

.service header box

）和主内容（

.content width wrapper

）具有不同的

max width

值。主内容具有更宽的

max width

，因此在标题达到其最大宽度后，它会继续扩展

为了解决这个问题，我建议您给它们相同的

最大宽度

：

.service-header-box {
  max-width: 1400px; // rather than 1084px
}

.content-width-wrapper {
    max-width: 1400px;
 }

---

已尝试，但仍未与内容包装分区对齐此问题无法解决您没有指定包装的最大宽度为1400px，我只是尝试根据您提供的信息进行回答。如果看不到

.content width wrapper

，

。entry content

或

。post content

的样式，很难说.e.内容区域。如果能看到一个。您好，刚刚在文件中添加了内容宽度包装css。这主要是定义了布局。您想让内容向左移动，还是让内容转到中心？？

.service-header-box {
  max-width: 1400px; // rather than 1084px
}

.content-width-wrapper {
    max-width: 1400px;
 }