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福的秘密！

修改
图像，根据要求。链接以红色为边界。（我必须将margin-left设置为70px才能达到这种效果。）

enter image description here

Answer 1

<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

Answer 2

你可以解决它的另一种方式（我这里没有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/

Answer 3

这可能不是很有用，但请看一看：将主Div内容与左对齐，然后将“more”div对齐，如下所示：

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

Answer 4

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

Answer 5

<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

右对齐两个div

5 个答案: