web-dev-qa-db-ja.com

CSSを使用して「ボックス」の右上隅または右下隅にテキストを配置する方法

hereとand here右側に、lorem ipsumsと同じ行にありますか？以下を参照してください。

Lorem Ipsum etc........here  
blah.......................  
blah blah..................  
blah.......................  
lorem ipsums.......and here
csslayout
15
Corey Trager
<div style="position: relative; width: 250px;">
  <div style="position: absolute; top: 0; right: 0; width: 100px; text-align:right;">
    here
  </div>
  <div style="position: absolute; bottom: 0; right: 0; width: 100px; text-align:right;">
    and here
  </div>
  Lorem Ipsum etc <br />
  blah <br />
  blah blah <br />
  blah <br />
  lorem ipsums
</div>

「上」と「下」の値を微調整する必要があるかもしれませんが、かなり近づきます。

31
Garry Shutler

右側に表示するテキストを右にフロートし、マークアップで、このテキストとその周囲のスパンが左側にあるテキストの前にあることを確認します。最初に表示されない場合は、別の行に表示されるフローティングテキストに問題がある可能性があります。

<html>
  <body>
    <div>
      <span style="float:right">here</span>Lorem Ipsum etc<br/>
      blah<br/>
      blah blah<br/>
      blah<br/>
      <span style="float:right">and here</span>lorem ipsums<br/>
    </div>
  </body>
</html>

これは、上下のコーナーだけでなく、どの線でも機能することに注意してください。

3
phloopy

Lorum Ipsumを含む要素の位置が絶対位置に設定されている場合、CSSを介して位置を指定できます。 「here」および「and here」要素は、ブロックレベル要素に含まれている必要があります。このようなマークアップを使用します。

print("<div id="lipsum">");
print("<div id="here">");
print("  here");
print("</div>");
print("<div id="andhere">");
print("and here");
print("</div>");
print("blah");
print("</div>");

上記のCSSは次のとおりです。

＃lipsum {position：absolute; top：0; left：0;}/*例*/
＃here {position：absolute; top：0; right：0;} 
＃andhere {position：absolute; bottom：0; right：0;}

繰り返しますが、上記は#lipsumが絶対配置されている場合にのみ（確実に）機能します。

そうでない場合は、floatプロパティを使用する必要があります。

＃here、＃andhere {float：right;}

また、マークアップを適切な場所に配置する必要があります。見栄えを良くするには、2つのdivにパディングとマージンが必要になるため、テキストがすべて一緒に実行されることはありません。

1
BrewinBombers

最初の行は3 <div>sで構成されます。 2つの内部<div>sを含む1つの外部。最初の内側の<div>にはfloat:leftがあり、これにより左側に固定されます。2番目の内側にはfloat:rightがあり、右側に固定されます。

<div style="width:500;height:50"><br>
<div style="float:left" >stuff </div><br>
<div style="float:right" >stuff </div>

...明らかにインラインスタイリングは最良のアイデアではありませんが、要点はわかります。

2、3、および4は単一の<div>sになります。

5は1のように機能します。

0
user1151

「ここ」を<div>または<span>にstyle="float: right"を付けて挿入する必要があります。

0
AdamB

絶対配置を使用できる場合があります。

コンテナボックスはposition: relativeに設定する必要があります。

右上のテキストはposition: absolute; top: 0; right: 0に設定する必要があります。右下のテキストはposition: absolute; bottom: 0; right: 0に設定する必要があります。

テキストコンテンツの通常のフローの外側に存在するため、ボックスのメインコンテンツが絶対配置要素の下で実行されないようにするには、paddingを試してみる必要があります。

0
ceejayoz
<style>
  #content { width: 300px; height: 300px; border: 1px solid black; position: relative; }
  .topright { position: absolute; top: 5px; right: 5px; text-align: right; }
  .bottomright { position: absolute; bottom: 5px; right: 5px; text-align: right; }
</style>
<div id="content">
  <div class="topright">here</div>
  <div class="bottomright">and here</div>
  Lorem ipsum etc................
</div>
0
Loren Segal

Div要素を右にフロートさせ、マージンを与えるだけです。この場合は「絶対」を使用しないでください。

#date {
  margin-right:5px;
  position:relative;
  float:right;
}
0
trillions

または、ニーズに合ったHTML要素を使用します。よりクリーンで、無駄のないマークアップを生成します。例：

<dl>
   <dt>Lorem Ipsum etc <em>here</em></dt>
   <dd>blah</dd>
   <dd>blah blah</dd>
   <dd>blah</dd>
   <dt>lorem ipsums <em>and here</em></dt>
</dl>

emを右側に（display: blockを使用して）フロートするか、親をposition: absoluteとしてposition: relativeに設定します。

0
Bruce