頁腳對齊一行左邊和另一個右邊頁面

更高的內容我有一個容器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來做到這一點。

我該如何做這項工作？

來源

2015-02-11 paradoX

有頁腳被定位爲絕對理由見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>

來源

2015-02-11 18:44:17 Marshiewooooooo

如果您看小提琴並將寬度擴展得足夠寬，則.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>

來源

2015-02-11 19:26:15 Zexter

這不起作用。我正在尋找與「＃容器」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();

來源

2015-02-17 21:31:46 paradoX

頁腳對齊一行左邊和另一個右邊頁面

回答

相關問題