右對齊兩個div

使用CSS，是否可以右對齊兩個DIV？右對齊兩個div

我有一個標題，我想右對齊它下面的更多鏈接。該網站是內部的，不幸的是，IE7是主要的瀏覽器。（我們將在年底之前升級到IE8，有些使用Chrome）。我想避免使用JavaScript，但我願意接受。

標題發生變化，所以絕對寬度不起作用。它應該是這個樣子：

| Arbitrarily long title text 
|      more...

我一直都在谷歌尋找一個解決方案，但一切到目前爲止，我發現涉及到右aliging一個DIV的內容，或右鍵將DIV與頁面對齊，或在絕對大小的DIV內對齊DIV。

到目前爲止，我可以向您展示我的努力，但由於它們都不起作用，所以我認爲它們沒有多大用處。

<html> 
    <body> 

     <div style="float:left;"> 
      Arbitrarily long title 
      <div style="float:right">more...</div> 
     </div> 

     <div style="width:0px; overflow:visible; white-space:nowrap;"> 
      Arbitrarily long title 
      <div style="float:right">more...</div> 
     </div> 

     <!-- This sort of simulates what I want, but the title length is arbitrary and I don't want to have to measure the text --> 
     <div style="width:120px;"> 
      Arbitrarily long title 
      <div style="float:right">more...</div> 
     </div> 

    </body> 
</html>

如果有人知道重複的問題，我很想知道你的Google-fu的祕密！

編輯
圖片，根據要求。該鏈接與紅色接壤。（我不得不把利潤率左設置爲70像素，達到這個影響。）

enter image description here

來源

2012-09-24 JDB

請提供你想要做....甚至油漆製成的圖像將是非常有益的圖像 –

嗯，這是要健全天真：這有什麼錯'文本-align'？ – Chris

你可以解決它（我沒有IE這裏的另一種方式，所以我現在無法測試它，但是我之前在跨瀏覽器上使用了類似的樣式）。

HTML：

<div class="title-block"> 
    <div>Arbitrarily long title</div> 
    <div class="more">more...</div> 
</div>

CSS：

.title-block { float: left; position: relative; padding-bottom: 1em; } 
.more { position: absolute; right: 0; bottom: 0; }

http://fiddle.jshell.net/BVFVa/

來源

2012-09-24 15:39:18

謝謝 - 我承認你首先得到了相對定位。 – JDB

<div style="float:left; position: relative"> 
    <div>Arbitrarily long title</div> 
    <div style="position:absolute; right: 0">more...</div> 
</div>

http://jsbin.com/efixij/7/edit

來源

2012-09-24 15:34:22 Schema

感謝您的努力。不幸的是，這個權利將「more ...」div對齊到頁面的右側。也許如果我使用的是非愚蠢的瀏覽器，它可以工作，但是IE7的決定遠高於我的薪酬等級。 :) – JDB

確實如此。 IE，去圖。編輯的答案應該可以，@ Jasper-de-vries擁有它 – Schema

現在，more-div位於包含div之外：http://jsbin.com/efixij/9/edit您至少需要一個「padding-bottom」一行（參見http://stackoverflow.com/a/12568324/880619） –

這可能不是非常有用的，但給它一看：對齊主要事業部內容左，那麼「更多「div to righ as here：

<div style="float: left;">  
    <div> 
     Arbitrarily extra extra long title here 
    </div>  
    <div style="float:right;"> 
     more... 
    </div> 
</div>

來源

2012-09-24 15:46:38 RMN

<div> 
    <div> Business area </div> 
    <div> Inernal Audit </div> 
    <div style="text-align: right;"><a href="#"> More... </a></div> 
</div>

來源

2012-09-24 15:58:00 Chanckjh

請在答案中給出一些解釋。 –

這與http://stackoverflow.com/a/12568200/880619有什麼不同？ –

<div class="one"> 
     Arbitrarily long title Arbitrarily long title 
     <div class="two">more...</div> 
    </div> 

.one{ 
    width:auto; 
    float:left; 
    border:thin red solid; 
    margin:5px; 
} 
.two{ 
    float:right; 
}

DEMO

來源

2012-09-24 16:03:31 Afshin

右對齊兩個div

回答

相關問題