HTML Texte nebeneinander positionieren?

4 Antworten

Wenn du generell noch nicht all zu gut bewandert bist, würde ich dir Bootstraps raten. Das ist ein CSS-Framework und macht alles "schöner", ohne dass du viel machen musst.

Bootstraps hat ein Grid system, womit du elemente direkt nebeneinander setzen kannst. Hie rkannst du auch angeben, wann die Elemente, die nebeneinander sind, untereinander angezeigt werden sollen (Handy).

https://getbootstrap.com/docs/4.0/layout/grid/

Ansonsten zählt, übern üben üben;)

float braucht man heutzutage nicht mehr nutzen, es gibt bereits einfachere und weitaus mächtigere Methoden, siehe:
https://css-tricks.com/snippets/css/a-guide-to-flexbox (dynamische Layouts)

und

https://css-tricks.com/snippets/css/complete-guide-grid (fixe Layouts)

Bevor du dich direkt mit CSS beschäftigst, solltest du HTML (Tags, Syntax und Semantik) auswendig kennen.

Woher ich das weiß: Berufserfahrung

Die zwei von mir am häufigsten genutzten CSS-Webseiten :-D

In dem Fall würde aber CSS "columns" wohl ausreichen.

1
@germanils

Hach, wie ich die Columns immer vergesse :D Danke für die Erinnerung!

1

Es gibt diverse Möglichkeiten, eine einfache ist die CSS-Anweisung "Columns":

https://css-tricks.com/almanac/properties/c/columns/

Das ist allerdings eher etwas für fortlaufende Texte.

Für 2 getrennte Spalten schau Dir mal die Antwort von Kolorbon an.

Woher ich das weiß: Berufserfahrung

Größe des Eltern div-Container an die Größe der Kinder div-Container anpassen?

Hey Leute. Ich bin gerade dabei eine Seite zu erstellen und gleichzeitig CSS zu lernen.

Jetzt bin ich dabei eine Seite zu designen, die Einzelheiten eines Benutzers zeigen soll. Nur bekomme ich das mit den div-Containern einfach nicht hin.

Meinem Verständnis nach ist das so, dass wenn ich einen Container habe, in dem zwei weitere Container sind die nebeneinander angeordnet sind und ich dann beiden die Höhe 100% gebe, dann müssten beide doch die maximale Höhe des Eltern Containers annehmen, oder verstehe ich da was falsch? Weil ich bekomme das einfach nicht auf die Reihe. Ich hab mal ein Bild angehängt in dem der Eltern Container (grau) der erste Kind Container (grün) und der zweite Kind Container (gelb) eingefärbt sind. Und da sieht man gut dass der Kind Container einfach über dem Eltern Container hinausschießt..

Ich hänge nochmal den Code aus dem HTML und dem CSS an. Vielleicht habe ich ja auch einen Denkfehler oder kenne mich einfach nur noch nicht genug in CSS aus und jemand kann mir helfen :)

Hier die Container: (Ich hoffe der Code wird richtig eingefügt. Irgendwie ändert sich hier im gutefrage Editor nichts)

<div class="benutzerprofil">
<div class="anschrift">
    <div class="uberschrift">
        <a class="uberschrift">Anschrift</a>
    </div>
    <div class="inhalt">
        <a class="anschrift">
        <?= $user->vorname . " " . $user->nachname ?><br>
        <?= $user->strasse . ", " . $user->hausnummer ?><br>
        <?= $user->postleitzahl . " " . $user->wohnort ?><br>
        <?= $user->bundesland ?>
        </a>
    </div>
</div>

<div class="erreichbar">
    <div class="uberschrift">
        Partner erreichbar unter
    </div>
    <div class="inhalt">
        <span class="erreichbar">
        E-Mail Adresse: <a href="mailto:<?= $user->email ?>"><?= $user->email ?></a><br>
        Handynummer: <?= (($user->handynummer==null)?"Nicht angegeben":$user->handynummer) ?><br>
        Telefonnummer: <?= (($user->telefonnummer==null)?"Nicht angegeben":$user->telefonnummer) ?>
        </span>
    </div>  
</div>
</div>  

Und hier der CSS Code dafür:

div.anschrift {
    height: 25%;
    background-color: gray;
}

div.anschrift > div.uberschrift {}
    float: left;
    background-color: green;
    height: 100%;
}

div.anschrift > div.inhalt {
    height: 100%;
    background-color: yellow;
}
...zur Frage

Was möchtest Du wissen?