1

CSS を使用して、2 つの DIV を右揃えにすることはできますか?

タイトルがあり、その下にある more リンクを右揃えにしたい。このサイトは内部サイトであるため、残念ながら IE7 が主要なブラウザーです。(年末までに IE8 にアップグレードする予定で、一部は Chrome を使用しています)。私はJavaScriptを避けたいのですが、私はそれを受け入れています.

タイトルが変更されるため、絶対幅は機能しません。次のようになります。

| Arbitrarily long title text
|                     more...

私は解決策を探してGoogleのいたるところにいましたが、これまでに見つけたものはすべて、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 に設定する必要がありました。)

ここに画像の説明を入力

4

5 に答える 5

3 
<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-24T15:34:22.243 に答える
2
于 2012-09-24T15:39:18.753 に答える
0

これはあまり役に立たないかもしれませんが、見てみましょう。メインのDivコンテンツを左に揃えてから、「more」divをここのように右に揃えます。

<div style="float: left;">     
    <div>
        Arbitrarily extra extra long title here
    </div>    
    <div style="float:right;">
        more...
    </div> 
</div>
于 2012-09-24T15:46:38.073 に答える
0 
<div>
    <div> Business area </div>
    <div> Inernal Audit </div>
    <div style="text-align: right;"><a href="#"> More... </a></div>
</div>
于 2012-09-24T15:58:00.093 に答える
0 
<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">デモ

于 2012-09-24T16:03:31.780 に答える