display flex mit 3 div

Ralph1 · 26 Juli 2023

Hallo,
ich möchte ein container mit 3 div
das obere soll die ganze breite einnehmen
die beiden darunter sollen sich die breite teilen, was auch funktioniert aber das erste div steht leider links von den beiden und nicht drüber

kann mir einer helfen

<v-container class="uebermich w-90 px-4 py-4">
<div class="h1uebermich">Über Mich</div>

<div>
<img class="imglogouebermich01" src="/public/uebermich01.png" alt="" />
</div>
<div class="uebertext pt-4 py-4 px-4">
<v-text>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam quam
fugit quibusdam, a possimus dolor aliquam repellat. Vel qui, ad iusto
asperiores voluptatibus numquam deleniti sunt illo officia! Suscipit
accusamus debitis quos
</v-text>
</div>
</v-container>

style

.uebermich {
display: flex;
border: 1px solid black;
border-radius: 10px;
margin: 20px 0 20px 0;
}
.uebertext {
margin-top: 60px;
border: 1px solid black;
border-radius: 10px;
margin-left: 10px;
}
.imglogouebermich01 {
margin-top: 60px;
border-radius: 10px;
}
.h1uebermich {
flex-grow: 1;
text-align: center;
font-size: 24px;
font-weight: bold;
background-color: red;
margin-bottom: 30px;
text-align: center;
}

Sclero2004 · 26 Juli 2023

Zunächst Mal würde ich das HTML von Ballast befreien. Custom-Tags sind nur in Ausnahmefällen nötig. Und der erste Container scheint als Überschrift gedacht zu sein, dann bietet sich das h1-Tag an. Damit Du die unteren Container von der Überschrift trennen und unten anordnen kannst, würde ich sie in einen Container packen. Das würde dann so aussehen:

Code:

<body>
    <v-container class="wr-uebermich w-90 px-4 py-4">
        <h1 class="uebermich">Über Mich</h1>
        <div class="lower">
            <img class="imglogouebermich01" src="images/busleft.png" alt="" />
            <p class="uebertext pt-4 py-4 px-4">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam quam
                fugit quibusdam, a possimus dolor aliquam repellat. Vel qui, ad iusto
                asperiores voluptatibus numquam deleniti sunt illo officia! Suscipit
                accusamus debitis quos
            </p>
        </div>
    </v-container>
</body>

Jetzt kannst Du das noch ein wenig ausgestalten:
h1 und div.lower werden von allein untereinander angeordnet.
Die Elemente in div.lower mit display: flex; nebeneinander anordnen und dem Bild und dem Absatz je ein flex: 1; geben, damit sie gleich groß sind.
Edit: Hatte gar nicht bemerkt, dass der Wrapper und die Überschrift die selbe Klasse haben. Habe ich geändert.

Ralph1 · 27 Juli 2023

oh sehr nett, vielen dank

Ralph

display flex mit 3 div

Ralph1

Neues Mitglied

Sclero2004

Mitglied

Ralph1

Neues Mitglied

Neueste Beiträge