Auf Thema antworten

Beitrag

[QUOTE="karlakol, post: 14752, member: 5201"]
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. 
[B]HTML derzeit:[/B]
<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>

[B]Style-CSS:[/B]
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;
    }

[B]In der style.css finde ich noch:[/B]
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
[/QUOTE]

Authentifizierung