it-swarm-eu.dev

Jak umístit text do pravého horního nebo dolního pravého rohu pole pomocí css

Jak bych se dostat here a and here být na pravé straně, na stejných linkách jako lorem ipsums? Podívejte se na následující:

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>

Dostane se vám docela blízko, i když možná budete muset Tweak "top" a "bottom" hodnoty.

29
Garry Shutler

Plovoucí text, který chcete zobrazit vpravo, a v značce zkontrolujte, zda tento text a jeho okolní rozpětí nastane před textem, který by měl být vlevo. Pokud se nevyskytne nejprve, můžete mít problémy s plovoucím textem, který se zobrazuje na jiném řádku.

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

Všimněte si, že to funguje pro všechny řádky, nejen horní a dolní rohy.

3
phloopy

Pokud je poloha prvku obsahujícího Lorum Ipsum nastavena absolutně, můžete polohu zadat pomocí CSS. Prvky "zde" a "a zde" by musely být obsaženy v prvku bloku. Použiju takové značení.

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

Zde je CSS výše.

 # lipsum {pozice: absolutní; horní: 0; vlevo: 0;}/* příklad */
 # zde {pozice: absolutní; horní: 0; vpravo: 0;} 
 # andhere {pozice: absolutní; dolní: 0; vpravo: 0;} 

Opět platí, že výše uvedené funguje pouze (spolehlivě), pokud #lipsum je umístěno přes absolutní hodnotu.

Pokud ne, musíte použít vlastnost float.

 # zde, #andhere {float: right;} 

Budete také muset umístit své značky na vhodné místo. Pro lepší prezentaci budou vaše dva divs pravděpodobně potřebovat nějaké vycpávky a okraje, takže text nebude fungovat společně.

1
BrewinBombers

První řádek by se skládal ze 3 <div>s. Jeden vnější, který obsahuje dvě vnitřní <div>s. První vnitřní <div> by mělo float:left, což by zajistilo, že zůstane vlevo, druhá by měla float:right, což by ho přilepilo doprava.

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

... Samozřejmě, že inline styling není ten nejlepší nápad - ale máte tu pravdu.

2,3 a 4 by byly jediné <div>s.

5 by fungovalo jako 1.

0
user1151

Musíte dát "zde" do <div> nebo <span> s style="float: right".

0
AdamB

Pravděpodobně budete moci použít absolutní umístění.

Kontejner by měl být nastaven na position: relative.

Text vpravo nahoře by měl být nastaven na position: absolute; top: 0; right: 0. Text vpravo dole by měl být nastaven na position: absolute; bottom: 0; right: 0.

Budete muset experimentovat s padding, abyste zastavili hlavní obsah krabice pod absolutně umístěnými prvky, protože existují mimo normální tok obsahu textu.

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

Musíte pouze plavat prvek div vpravo a dát mu marži. Ujistěte se, že nepoužívejte "absolutní" pro tento případ.

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

Nebo ještě lépe, použijte HTML prvky, které vyhovují vašim potřebám. Je to čistší a vytváří štíhlejší značení. Příklad:

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

Přepněte em doprava (pomocí display: block), nebo nastavte position: absolute s jeho rodičem jako position: relative.

0
Bruce