html - 右对齐两个 div

Question

使用 CSS，是否可以右对齐两个 DIV？

我有一个标题，我想右对齐它下面的更多链接。该站点是内部站点，因此很遗憾，IE7 是主要浏览器。（我们会在年底前升级到IE8，部分正在使用Chrome）。我想避免使用javascript，但我对此持开放态度。

标题改变了，所以绝对宽度不起作用。它应该看起来像这样：

| Arbitrarily long title text
|                     more...

我一直在寻找解决方案的谷歌，但到目前为止我发现的所有内容都与右对齐 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 的秘密！

根据要求编辑
图像。该链接带有红色边框。（我必须将 margin-left 设置为 70px 才能实现这种效果。）

在此处输入图像描述

score 3 · Accepted Answer

<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

score 2 · Accepted Answer

2

于 2012-09-24T15:39:18.753 回答

score 0 · Accepted Answer

This might not be very useful but give it a look: Align main Div content to left and then the "more" div to righ as here :

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

score 0 · Accepted Answer

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

score 0 · Accepted Answer

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

<a href="http://jsfiddle.net/afshinprofe/tNRAr/1/" rel="nofollow">DEMO

html - 右对齐两个 div

5 回答 5

Related