如何将两个div分别对齐至页面最左侧和中心右侧紧邻处

要让一个div固定在页面最左侧，另一个紧贴页面中心右侧，你之前用width:50%和margin的方法失效，核心原因是没精准锚定中心位置。下面给两种靠谱的实现方案：

方案一：绝对定位法（简洁直接） #

通过绝对定位锚定两个div的位置，不管窗口怎么缩放，位置都不会乱：

<div class="help-bar-div">
  <hr>
  <div class="container">
    <div class="left-text">text1</div>
    <div class="center-right-text">text2</div>
  </div>
</div>

.container {
  position: relative;
  width: 100%;
}
.left-text {
  position: absolute;
  left: 0; /* 固定在页面最左侧 */
}
.center-right-text {
  position: absolute;
  left: 50%; /* 左边缘刚好对齐页面中心，实现紧贴中心右侧的效果 */
}

如果担心窗口过窄时两个div重叠，可以给.container加个最小宽度，比如min-width: 300px，避免布局错乱。

方案二：Flex布局法（符合文档流） #

如果不想用绝对定位，用flex布局也能实现，更适配复杂页面的布局流：

<div class="help-bar-div">
  <hr>
  <div class="flex-container">
    <div class="left-text">text1</div>
    <div class="center-wrapper">
      <div class="center-right-text">text2</div>
    </div>
  </div>
</div>

.flex-container {
  display: flex;
  width: 100%;
}
.center-wrapper {
  width: 50%;
  display: flex;
  justify-content: flex-start; /* 让内部div紧贴容器左边缘（即页面中心） */
}
.left-text {
  /* 自动靠左，无需额外设置 */
}

这个方案里，.center-wrapper占页面一半宽度，它的左边缘就是页面中心，内部的center-right-text靠左对齐，自然就紧贴中心右侧了。

你原有代码的问题 #

你之前用inline-block+float的组合，没有明确的定位基准，inline-block本身会有默认间距，float的布局逻辑也会随窗口缩放出现偏移，所以没法稳定实现需求。

内容的提问来源于stack exchange，提问作者learner