Wie Text in der oberen rechten Ecke zu stellen, oder rechte Ecke einer „Box“ senken mit CSS

StackOverflow https://stackoverflow.com/questions/65536

  •  09-06-2019
  •  | 
  •  

Frage

Wie würde ich die here und and here auf der rechten Seite zu sein, auf der gleichen Linie wie die lorem ipsums? Siehe folgende Möglichkeiten: 

Lorem Ipsum etc........here  
blah.......................  
blah blah..................  
blah.......................  
lorem ipsums.......and here
War es hilfreich?

Lösung 

<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 man ziemlich nahe, obwohl Sie die „oben“ und „unten“ Werte optimieren müssen.

Andere Tipps

Float Recht, den Text, den Sie auf der rechten Seite angezeigt werden soll, und in der Markup stellen Sie sicher, dass dieser Text und die umliegenden Spanne Text auftritt, bevor die auf der linken Seite sein sollte. Wenn es nicht erst auftritt, haben Probleme mit der schwebten Text erscheint auf einer anderen Leitung haben. 

<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 die oberen und unteren Ecken.

Wenn die Position des Elements der Lorum Ipsum enthält absolute gesetzt ist, können Sie die Position per CSS angeben. Die „hier“ und „und hier“ Elemente müßten in einem Block-Elemente enthalten sein. Ich werde Markup wie folgt 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 die CSS für oben. 

#lipsum {position:absolute;top:0;left:0;} /* example */
#here {position:absolute;top:0;right:0;}
#andhere {position:absolute;bottom:0;right:0;}

Auch die oben funktioniert nur (zuverlässig), wenn #lipsum über absolute positioniert ist.

Wenn nicht, müssen Sie die Eigenschaft float verwenden. 

#here, #andhere {float:right;}

Sie werden auch Ihren Markup an der entsprechenden Stelle setzen müssen. Zur besseren Darstellung Ihre zwei divs werden wahrscheinlich einige Polsterung und Margen müssen, damit der Text überhaupt nicht zusammen ausgeführt werden. 

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

oder noch besser, HTML-Elemente verwenden, die Ihren Bedarf passen. Es ist sauberer und produziert schlanken Markup. 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>

Float der em nach rechts (mit display: block), oder legen Sie es mit seinen Eltern als position: absolute position: relative.

Sie müssen "hier" in eine <div> oder <span> mit style="float: right" setzen.

Die erste Zeile würde aus 3 <div>s. Eine äußere, die zwei inneren <div>s enthält. Die erste innere <div> würde float:left haben, die sicherstellen, wäre es auf der linken Seite bleibt, würde die zweite float:right haben, die es auf der rechten Seite halten würde. 

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

... offensichtlich das Inline-Styling ist nicht die beste Idee -. Aber Sie erhalten den Punkt

2,3 und 4 würden einzelne <div>s sein.

5 würde wie 1 arbeiten.

Sie können hier die absolute Positionierung verwenden.

Die Container-Box sollte position: relative eingestellt wird.

Der oben rechts Text sollte auf position: absolute; top: 0; right: 0 eingestellt werden. Der untere rechte Text sollte auf position: absolute; bottom: 0; right: 0 eingestellt werden.

Sie werden mit padding zu experimentieren, um die wichtigsten Inhalte der Box zu stoppen von unterhalb der absoluten positionierte Elemente laufen, da sie außerhalb des normalen Fluss der Textinhalte vorhanden sein.

Sie müssen nur das div-Element auf der rechten Seite schweben und es einen Spielraum geben. Stellen Sie sicher, verwenden nicht „absolut“ für diesen Fall. 

#date {
  margin-right:5px;
  position:relative;
  float:right;
}
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top