html & css: Linksbündig und rechtsbündig in _einer_ Zeile?

4 Antworten

NackterGerd
23.09.2019, 19:18

So wie ich verstehe willst du 2 Texte in einer Zeile.

Entweder du machst eine Tabelle mit 2 Spalten.

Oder du machst aus deinem DIV ein Grid-Container und legst dort 2 P Elemente. Das eine per css links und linksbündig das andere Rechts und rechtsbündig

XentriX5526 
Fragesteller
 23.09.2019, 19:36

eine Tabelle mit 2 Spalten war jetzt auch meine Wahl, vor allem weil ich hier direkt den Inhalt vertical auf center setzen konnte... Danke!

2
EinAlexander  24.09.2019, 11:05
@XentriX5526
eine Tabelle mit 2 Spalten war jetzt auch meine Wahl,

Dann hast Du die schlechteste alle Möglichkeiten gewählt. Wie sieht denn Deine Tabelle auf einem Handy-Display aus?

0
XentriX5526 
Fragesteller
 25.09.2019, 08:39
@EinAlexander

jaaaa.... bin jetzt auf 2 DIVs mit "absolute" umgestiegen, brauche sogar noch einen weiteren Vorteil mit sich... da sich diesem dem inhalt anpassen... passt. Danke!

0
medmonk
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Computer, Technik
23.09.2019, 22:43

HTML:

<div class="container">
 <p class="is-flex">
  <span class="has-text-left">here some text...</span>
  <span class="has-text-right">...and some other here</span>
 </p>
</div>

CSS:

/* minimal reset */
* {
 box-sizing: border-box;
 padding: 0;
 margin: 0;
}

/* helper classes */
.is-flex {
  display: flex;
}

.has-text-left {
  width: 100%;
  text-align: left; 
}

.has-text-right { 
  width: 100%;
  text-align: right; 
}

Eine Tabelle ist zur Darstellung von tabellarischen Daten gedacht, jedoch nicht zum "Layouten" einer Seite. Erweitere lieber dein Markup und passe dieses mit CSS an, anstatt es mit einer Tabelle aufzublasen.

LG medmonk
Woher ich das weiß:Berufserfahrung
EinAlexander
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Computer, HTML, CSS
24.09.2019, 11:02
Gibt es eine Möglichkeit OHNE <div> text in einer Zeile linksbündig und rechtsbündig zu schrieben?

Wenn es nur um zwei Wörter geht, machst Du das mit der Eigenschaft text-align-last:

<!doctype html>
<title>text</title>
<style>
div { text-align-last:justify }
</style>
<div>hello world</div>
Ich will aber nicht noch mehr DIV einfügen...

Immer noch besser als eine Tabelle dafür zu verwenden. Richtig würde man das so machen:

<!doctype html>
<title>text</title>
<style>
.outer { display:flex }
.outer div:first-child {
   width:100%;
   text-align:left;
   background:red
   }
.outer div:last-child {
   width:100%;
   text-align:right;
   background:green
   }
</style>
<div class="outer">
    <div>hello world</div>
    <div>hello world</div>
</div>

Alex
mastema666
23.09.2019, 19:03

Du kannst statt div auch span z.B. benutzen, kommt aber aufs gleiche raus, irgendeinen Tag wirst du eohl benutzen müssen um dem Browser mitzuteilen wie er deinen Text darstellen soll.

Oder du setzt für das (vorhandene) div einfach "text-align: justify;" (damit kannst du aber nicht selbst festlegen welcher "Teil" davon rechts- bzw linksbündig sein soll, der Text wird einfach auf die gesamte Breite verteilt.