Margin Padding Boxen (Nav + Content)

[Andrin.Spitzer]

Hay. Ich habe noch ne frage. ich möchte ähnlich wie beim Kontakt anstatt die 2 div nebeneinander mehrere Logos nebeneinander und wen die Linie voll ist einfach in der nächsten reihe weiter auflisten.
Natürlich sollten alle alle bilder automatisch die selbe grösse vorweisen.

 

[Sempervivum]

Im einfachsten Fall geht das, indem Du einfach die Bilder nacheinander in einen Container schreibst und ihnen eine feste Höhe gibst. Der Zeilenumbruch erfolgt dann automatisch:

    <div id="container">
        <img src="images/dia0.jpg">
        <img src="images/dia1.jpg">
        <img src="images/dia2.jpg">
        <img src="images/dia3.jpg">
        <img src="images/dia4.jpg">
    </div>

        #container img {
            height: 200px;
        }

 

[Andrin.Spitzer]

Hay. Ich möchte mit wie im bisherigen Code mit margin und float arbeiten. Mein Ziel sind 4 max. Logos pro reihe nebeneinander und dann ein Umbruch und dann wider das selbe und so weiter wen es zu wenig Logos wären um eine ganze reihe zu füllen sollte einfach die reihe zentriert werden. wen du verstehst was ich meine

 

[Sempervivum]

In dem bisherigen Code in diesem Thread finde ich nur Flex, kein Float?

 

[Andrin.Spitzer]

In dem bisherigen Code in diesem Thread finde ich nur Flex, kein Float?

Ah ja klar habs verwechselt meine natürlich flex

 

[Andrin.Spitzer]

habe es so gelöst:

<div class="item-transparent" id="info">
    <ul class="flex-container wrap">
            <li class="flex-item"><img class="logo" src="./img/ochsner_logo.png"></li>
            <li class="flex-item"><img class="logo" src="./img/ochsner_logo.png"></li>
            <li class="flex-item"><img class="logo" src="./img/ochsner_logo.png"></li>
            <li class="flex-item"><img class="logo" src="./img/ochsner_logo.png"></li>
            <li class="flex-item"><img class="logo" src="./img/ochsner_logo.png"></li>
            <li class="flex-item"><img class="logo" src="./img/ochsner_logo.png"></li>
            <li class="flex-item"><img class="logo" src="./img/ochsner_logo.png"></li>
            <li class="flex-item"><img class="logo" src="./img/ochsner_logo.png"></li>
     </ul>
</div>

.item-transparent {
            flex: 1;
            margin-top: 0em;
            margin-bottom: 2em;
            margin-left: 20%;
            margin-right: 20%;
            padding: 2em;
}

.wrap    {
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
} 

.flex-item {
  margin: 10px;
  line-height: 10px;
}

.logo {
            width: 35em;
}

 

[Andrin.Spitzer]

aber jetzt habe ich ein problem ich möchte das die verschidenen bilder immer eine linie bilden am besten schaust du dir die website an dann siehst du was ich meine

 

[Sempervivum]

Da sehe ich noch keine Reihe von Logos. Hast Du es überhaupt hoch geladen?

 

[Andrin.Spitzer]

Jetzt solltest du sie sehen

 

[Sempervivum]

Ja, jetzt sind sie da, aber untereinander. Wolltest Du sie nicht nebeneinander haben?