15

herelorem ipsumsと同じ行で、とand hereを右側に配置するにはどうすればよいですか？以下を参照してください。

Lorem Ipsum etc........here  
blah.......................  
blah blah..................  
blah.......................  
lorem ipsums.......and here
4

9 に答える 9

35 

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

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

于 2008-09-15T18:47:32.893 に答える
4

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

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

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

于 2008-09-15T19:50:29.183 に答える
1

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;} /* 例 */
#ここ {position:absolute;top:0;right:0;}
#andhere {position:absolute;bottom:0;right:0;}

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

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

#ここ、#そしてここ {float:right;}

また、マークアップを適切な場所に配置する必要があります。見栄えを良くするために、2 つの div にはおそらくパディングとマージンが必要で、テキストがすべて一緒に表示されないようにする必要があります。

于 2008-09-15T18:53:37.480 に答える
1 
<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>
于 2008-09-15T18:48:23.063 に答える
0

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

#date {
  margin-right:5px;
  position:relative;
  float:right;
}
于 2012-03-24T22:51:24.850 に答える
0

または、必要に応じて 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: blockposition: absoluteposition: relative

于 2008-09-15T19:49:55.113 に答える
0

最初の行は 3<div>秒で構成されます。2 つのインナーを含む 1 つのアウター<div>。最初のインナー<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 のように機能します。

于 2008-09-15T18:44:57.220 に答える
0

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

于 2008-09-15T18:46:23.473 に答える
0

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

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

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

paddingテキスト コンテンツの通常の流れの外側に存在するため、ボックスのメイン コンテンツが絶対配置要素の下にならないように実験する必要があります。

于 2008-09-15T18:46:54.377 に答える