html - CSS 页脚将一行左对齐，另一行右对齐页面上的内容

Question

我有一个容器 div，这个 div 里面是随机内容和一个页脚标签。页脚包含 2 个带有随机文本的跨度。我想将第一个跨度向左对齐，第二个跨度向右对齐。

问题是我的页脚位于窗口底部。因此，页脚的宽度仅与其内的文本一样宽，而不是“包含” block 的宽度(它不是真正的容器，因为显然 CSS 认为容器是第一个提供非默认位置的 block ) .

HTML

<div id="container">
    <div class="randomContent">
        <h1>Content of an arbitrarily long length will go here</h1>

        <footer>
            <span class="alignLeft">Hello world</span>
            <span class="alignRight">other text</span>
        </footer>
    </div>
</div>

CSS

#container {
    display: inline-block;

    border: 1px solid #000000;
}

footer {
    position: absolute;
    bottom: 0;
    height: 60px;           /* Height of the footer */
    border: 1px solid #000000;
}

.alignLeft {
    float: left;

}

.alignRight {
    float: right;

}

我的 JS Fiddle显示问题。我希望框的宽度相同，“hello world”文本左对齐，“其他文本”在页脚中右对齐。这应该随着“顶部”文本大小的变化而调整。

这是第二个 JSFiddle这表明我在寻找什么。我希望在没有 java 脚本的情况下做到这一点。希望仅使用 CSS 来做到这一点。

我怎样才能使这项工作？

Answer 1

抱歉，试试这个，它对我有用。

#container {
  display: inline-block;
  border: 1px solid #000000;
}
footer {
  position: absolute;
  bottom: 0;
  left: 0px;
  height: 60px;
  /* Height of the footer */
  width: 100%;
}
.footer {
  margin: 8px;
  border: 1px solid #000000;
  height: 50px;
}
.alignLeft {
  float: left;
}
.alignRight {
  float: right;
}

<div id="container">
  <div class="randomContent">
    <h1>Content of an arbitrarily long length will go here</h1>

    <footer>
      <div class="footer">
        <span class="alignLeft">Hello world</span>
        <span class="alignRight">other text</span>
      </div>
    </footer>
  </div>
</div>