Question

我有一个容器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 {{3}}。我希望在没有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>

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

Answer 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();

CSS页脚左侧对齐一行，另一行右侧对齐内容

3 个答案: