页脚对齐一行左边和另一个右边页面

问题描述：

更高的内容我有一个容器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来做到这一点。

我该如何做这项工作？

有页脚被定位为绝对理由见JSFiddle？如果您将页脚从'position：absolute;'更改为'position：relative;'，然后将页脚的宽度设置为100％;'您可能会得到您要查找的内容。 [JSFiddle]（https://jsfiddle.net/xrksofu7/32/） – Matt 2015-02-11 19:19:09

我使用'position：absolute;'的原因是，页脚位于页面底部。如果我使用“position：relative”，那么对齐方式确实有效，但是我的页脚位于内容的底部而不是页面。 – paradoX 2015-02-12 18:38:15

答

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

#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％，所以这个答案不会工作，因为它没有解决原始问题。 – Matt 2015-02-11 18:47:13

答

请尝试，我发现是使用jQuery强制页脚是大小作为容器下同

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

这不起作用。我正在寻找与“＃容器”div边缘对齐的“其他文本”。在上面的解决方案中，它比'＃容器'div宽度小。如果我删除“最小宽度：49％”，那么它就会变宽。 – paradoX 2015-02-12 18:53:33

请检查更新。 – Zexter 2015-02-12 19:45:49

我一直在玩你的解决方案。这绝对接近我在找的东西。看到这[JSFiddle]（https://jsfiddle.net/JSparadoX/2owLg3zw/）。这是我正在寻找的行为。尽管纯CSS可能无法实现... – paradoX 2015-02-14 05:12:21

答

唯一的解决办法。

为例

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

页脚对齐一行左边和另一个右边页面

相关推荐