Margin Padding Boxen (Nav + Content)

Andrin.Spitzer

Erfahrenes Mitglied
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

Erfahrenes Mitglied
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:
HTML:
    <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>
CSS:
        #container img {
            height: 200px;
        }
 

Andrin.Spitzer

Erfahrenes Mitglied
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
 

Andrin.Spitzer

Erfahrenes Mitglied
habe es so gelöst:
HTML:
<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>

CSS:
.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

Erfahrenes Mitglied
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
 
Zuletzt bearbeitet: