Habe sechs Bilder in Div-Tags. Fünf sind nebeneinander eines ist darunter. Wie kann ich sie anders anordnen?

[karlakol]

Liebes Team!

Habe gedacht, ich hätte gestern einen Beitrag gepostet. Finde diesen nicht. Es geht um einen Schulauftrag meiner Tochter ...

Sie möchte sechs Bilder, die sich im HTML-Code in div-Tags befinden anders andordnen: Derzeit fünf Bilder nebeneinander und eines ist darunter. Lieber wären ihr z. B. je drei Bilder in einer Reihe. Oder je zwei in einer Reihe.
HTML derzeit:
<div>
<figure>
<img src="./images/8.jpg" alt="Beine männlich">
<figcaption>Beine männlich</figcaption>
</figure>
</div>

<div>
<figure>
<img src="./images/10.jpg" alt="Arme männlich">
<figcaption>Arme männlich</figcaption>
</figure>
</div>

Style-CSS:
igure {
width: 250px;
height: auto;
float: right;
padding: 1em 1em 3em 1em;
border: 1px solid silver;
margin: 0 2em 2em 2em;
box-shadow: 10px 0px 25px #555;
transform: rotate(1deg);
font-family: 'Rock Salt', cursive;
color: #999;
padding-top: 1em;
line-height: 1.2em;
text-align: center;
}
figure img {
width: 100%;
height: auto;
}


In der style.css finde ich noch:
header div {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: baseline;
}

main {
display:flex;
flex-wrap:wrap;
justify-content: space-between;
}

main>div {
width: calc(100% / 5 - 20px);
}

Vielen Dank für Eure Hilfe! Falls es diesmal funktioniert mit der Themenerstellung ...

LG

 

[Sempervivum]

Hallo und willkommen im Forum!

Habe gedacht, ich hätte gestern einen Beitrag gepostet. Finde diesen nicht.

Das ist ein Fehler in der Forensoftware. Ich hatte gestern auch eine Email-Benachrichtigung bekommen über deine Frage und als ich es aufmachen wollte, war der Beitrag verschwunden.

Was deine Frage betrifft: Als erstes vergesst float, das lässt sich viel besser mit Gridlayout machen:

main>div {
    /* Verwendet man Gridlayout braucht man diese Rechnerei
    mit Pixeln nicht mehr: */
    /* width: calc(100% / 5 - 20px); */
    display: grid;
    /* Drei Spalten für die Bilder anlegen
    mit gleicher Breite: */
    grid-template-columns: 1fr 1fr 1fr;
}

Näheres könnt ihr z. B. hier nachlesen:
https://www.mediaevent.de/css/grid.html
Viel Erfolg!

 

[karlakol]

Herzlichen Dank für die schnelle Antwort und den guten Link! Muss ich mich einmal durchackern ...
LG

 

[karlakol]

Jetzt habe ich es doch irgendwie hinbekommen mit dem Grid. Vielen Dank!

Allerdings seh ich diesen Sofortbildkamerafotorahmen im Browser Safari nur im oberen Viertel ...Muss einen CSS-Checker laufen lassen bzw. schauen, ob es den Safari auch für Windows gibt.