CSS 页脚将一行左对齐，另一行与页面上更高的内容对齐答案

【问题标题】：CSS Footer align one line left and the other right with content higher on pageCSS 页脚将一行左对齐，另一行与页面上更高的内容对齐
【发布时间】：2015-04-12 06:27:17
【问题描述】：

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

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

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 来实现。

我怎样才能做到这一点？

【问题讨论】：

页脚被定位为绝对是有原因的吗？如果您将页脚从position:absolute; 更改为position:relative;，然后设置页脚width: 100%;，您可能会得到您想要的。 JSFiddle
我使用position:absolute; 的原因是页脚位于页面底部。如果我使用 position:relative; 对齐确实有效，但我的页脚位于内容的底部而不是页面的底部。

标签： html css formatting footer

【解决方案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>

【讨论】：

如果您查看小提琴并将宽度扩展得足够宽，则 .randomContent 不是 100% 宽度。因为内容不是 100%，所以这个答案不会起作用，因为它没有解决原始问题。

【解决方案2】：

请尝试以下方法

<style>
            #container {
              display: inline-block;
              border: 1px solid #000000;
              width: auto;
            }
            footer {
              position: absolute;
              bottom: 0;
              left: 0px;
              height: 60px;
              /* Height of the footer */
              width: 100%;
            }
            .footer {
              margin: 8px;
              border: 1px solid #000000;
              height: 50px;
        clear:both;
            }
            .alignLeft {
              float: left;
        min-width:50%;
        width:auto;
        background-color :green;

            }
            .alignRight {
            text-align:right;
              float: right;
        min-width:50%;
        width:auto;
        background-color: red;
            }

     </style>



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

【讨论】：

这不太行。我正在寻找与#container div 的边缘右对齐的“其他文本”。在上述解决方案中，它的宽度小于#container div。如果我删除min-width:49%;，它就会变宽。
我一直在玩你的解决方案。它肯定更接近我正在寻找的东西。请参阅此JSFiddle。这是我正在寻找的行为。不过，纯 CSS 可能无法实现...
我认为最新的更新就是解决方案。不幸的是，#container 的宽度设置为 100%。我想要的是容器的宽度只能与任意长的内容一样宽。然后我希望页脚具有相同的宽度并具有前面提到的对齐特性。看看我的具有 javascript 的 JSFiddle。您会注意到，无论#container 的大小如何，页脚的大小都是相同的，并且文本正确对齐。我看的越多，我就越不相信只使用 CSS 就可以解决它。感谢您的坚持！
现在请检查我将宽度设置为自动

【解决方案3】：

我找到的唯一解决方案是使用 jquery 强制页脚与其容器大小相同。

查看JSFiddle 示例

JavaScript 代码

var containerObj = $("#container");
var footerObj = $("footer");

//Event function that resizes the footer to match the container
function matchContainerSize() { 
    var containerWidth = containerObj.width();
    footerObj.css('width', containerWidth);

    console.log("event fired!");
}

//Wire up the event.
$(window).on('resize', matchContainerSize);

//Call the function so that the initial sizing can take place.
matchContainerSize();

【讨论】：