it-swarm-eu.dev

Wie wird der Text in der oberen rechten oder unteren rechten Ecke einer "Box" mit css eingefügt?

Wie würde ich erreichen, dass here und and here auf der rechten Seite stehen, in derselben Zeile wie das Lorem ipsums? Siehe folgendes:

Lorem Ipsum etc........here  
blah.......................  
blah blah..................  
blah.......................  
lorem ipsums.......and here
13
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>

Ruft Sie ziemlich nahe auf, obwohl Sie die Werte für "Top" und "Bottom" möglicherweise anpassen müssen.

29
Garry Shutler

Verschieben Sie den Text, den Sie rechts anzeigen möchten, nach rechts, und stellen Sie im Markup sicher, dass dieser Text und der umgebende Bereich vor dem Text erscheinen, der links sein soll. Wenn er nicht zuerst auftritt, haben Sie möglicherweise Probleme mit dem schwebenden Text, der in einer anderen Zeile angezeigt wird.

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

Beachten Sie, dass dies für jede Linie funktioniert, nicht nur für die oberen und unteren Ecken.

3
phloopy

Wenn die Position des Elements, das das Lorum Ipsum enthält, absolut festgelegt ist, können Sie die Position über CSS angeben. Die Elemente "hier" und "und hier" müssten in einem Blockebenenelement enthalten sein. Ich werde Markup so verwenden.

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>");

Hier ist das CSS für oben.

 # lipsum {position: absolut; oben: 0; links: 0;}/* Beispiel */
 # hier {Position: absolut; oben: 0; rechts: 0;} 
 # andhere {position: absolute; bottom: 0; right: 0;} 

Auch hier funktioniert das Obige nur dann (zuverlässig), wenn #lipsum über absolut positioniert ist.

Wenn nicht, müssen Sie die Float-Eigenschaft verwenden.

 # hier, #andhere {float: right;} 

Sie müssen auch Ihr Markup an der entsprechenden Stelle platzieren. Für eine bessere Darstellung benötigen Ihre beiden Divs wahrscheinlich einige Füllungen und Ränder, damit der Text nicht alle zusammen läuft.

1
BrewinBombers

Die erste Zeile würde aus 3 <div>s bestehen. Eine äußere, die zwei innere <div>s enthält. Der erste innere <div> hätte float:left, der sicherstellen würde, dass er links bleibt, der zweite float:right, der ihn rechts halten würde.

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

... offensichtlich ist das Inline-Styling nicht die beste Idee - aber Sie verstehen, worum es geht.

2,3 und 4 wären einzelne <div>s.

5 würde wie 1 funktionieren.

0
user1151

Sie müssen "hier" in einen <div> oder <span> mit style="float: right" einfügen.

0
AdamB

Möglicherweise können Sie die absolute Positionierung verwenden.

Die Container-Box sollte auf position: relative eingestellt sein.

Der Text oben rechts sollte auf position: absolute; top: 0; right: 0. Gesetzt sein. Der Text unten rechts sollte auf position: absolute; bottom: 0; right: 0 gesetzt sein.

Sie müssen mit padding experimentieren, um zu verhindern, dass der Hauptinhalt der Box unter den absolut positionierten Elementen ausgeführt wird, da sie außerhalb des normalen Textflussinhalts liegen.

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

Sie müssen das div-Element nur nach rechts verschieben und einen Rand angeben. Stellen Sie sicher, dass Sie für diesen Fall nicht "absolut" verwenden.

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

Oder noch besser, verwenden Sie HTML-Elemente, die Ihren Bedürfnissen entsprechen. Es ist sauberer und erzeugt schlankere Markups. Beispiel:

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

Verschieben Sie die Variable em nach rechts (mit display: block) oder setzen Sie sie mit position: absolute auf position: relative.

0
Bruce