[OPGELOST][CSS] float: left (Nieuwe lijn is niet altijd juist)
De bedoeling is dat alle afbeeldingen mooi naast elkaar staan, bij het einde van de lijn moeten de afbeeldingen op een nieuwe lijn beginnen.
De afbeeldingen zijn altijd 100px breed maar de hoogte wisselt af.
Het zijn niet altijd x-aantal afbeeldingen naast elkaar. Bij kleinere beeldresoluties zullen er minder afbeeldingen naast elkaar staan dan bij grote afbeeldingen.
In het voorbeeld heb ik een body max-width van 800px geplaatst, deze staat er alleen om het probleem beter laten te zien.
De afbeeldingen A1 tot A11 zijn van klein naar groot, die worden goed weergegeven.
De afbeeldingen B1 tot B11 zijn van groot naar klein, die gaan totaal mis.
De oplossing die ik vraag zou opgelost moeten worden met CSS, niet in de broncode.
Thx
Gewijzigd op 10/08/2012 21:19:05 door G P
Gewijzigd op 10/08/2012 18:58:51 door daniyal hussain
margin: 20px;
padding: 5px;
float: left;
border: solid 1px #000000;
width: 100px;
}
float: center; ?????
snapje waarom het niet zo werkt als jij wilt ;) b8 zou nevernooit kunnen aan de linker kant.
wat je wel kan doen. is zeggen dat na elke 3e element. een element een clear:both; krijgt.
nu denk je hmm hoe wat wie wanneer? moet ik elke 4e element een clearboth geven? inline css? hea?
neehoor dat kan simpel voeg dit maar is toe aan je css onder je img { }
Code (php)
1
2
3
2
3
img:nth-child(3n){
clear:both;
}
clear:both;
}
wat doet dit? even een korte uitleg:
je pakt de img tag. en pakt alle childs van de img tag. ( nth-child ) vervolgens zeg je ik wil elke 4e element een clear both geven dat is ( 3n ) dus na de 3e element krijgt alles een clear. ik zou zeggen probeer het uit :)
Om iedere 5 images zet je een div met de class naam "image_row".
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="image_row">
<img src="" alt="B1" width="100" height="200" />
<img src="" alt="B2" width="100" height="190" />
<img src="" alt="B3" width="100" height="180" />
<img src="" alt="B4" width="100" height="170" />
<img src="" alt="B5" width="100" height="160" />
</div>
<div class="image_row">
<img src="" alt="B6" width="100" height="150" />
<img src="" alt="B7" width="100" height="140" />
<img src="" alt="B8" width="100" height="130" />
<img src="" alt="B9" width="100" height="120" />
<img src="" alt="B10" width="100" height="110" />
</div>
<div class="image_row">
<img src="" alt="B11" width="100" height="100" />
</div>
<img src="" alt="B1" width="100" height="200" />
<img src="" alt="B2" width="100" height="190" />
<img src="" alt="B3" width="100" height="180" />
<img src="" alt="B4" width="100" height="170" />
<img src="" alt="B5" width="100" height="160" />
</div>
<div class="image_row">
<img src="" alt="B6" width="100" height="150" />
<img src="" alt="B7" width="100" height="140" />
<img src="" alt="B8" width="100" height="130" />
<img src="" alt="B9" width="100" height="120" />
<img src="" alt="B10" width="100" height="110" />
</div>
<div class="image_row">
<img src="" alt="B11" width="100" height="100" />
</div>
Aan je css voeg je dit toe:
Code (php)
1
2
3
4
2
3
4
.image_row {
float: none;
overflow: auto;
}
float: none;
overflow: auto;
}
Another problem solved ;)
Spijtig is geen enkel antwoord nuttig voor mijn probleem.
Zoals ik zei in mijn vraag, elke rij heeft niet een bepaald aantal afbeeldingen.
Iemand met een beeldresolutie 800x600 heeft minder afbeeldingen naast elkaar dan iemand met 1280x1024, maar toch moet de volgende rij beginnen aan de linkerzijde van het scherm.
Hier vind je de oplossing
Geen float: left; maar simpelweg display: inline-block;
Gewijzigd op 10/08/2012 21:15:43 door G P