[OPGELOST][CSS] float: left (Nieuwe lijn is niet altijd juist)

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

G P

G P

10/08/2012 18:29:43
Quote Anchor link
Link naar het probleem: http://jsfiddle.net/MNmBn/3/

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
 
PHP hulp

PHP hulp

22/06/2024 08:23:14
 
Daniyal hussain

daniyal hussain

10/08/2012 18:57:55
Quote Anchor link
probeer float:center; of moet het float:left;
Gewijzigd op 10/08/2012 18:58:51 door daniyal hussain
 
G P

G P

10/08/2012 19:04:50
Quote Anchor link
img {
margin: 20px;
padding: 5px;
float: left;
border: solid 1px #000000;
width: 100px;
}

float: center; ?????
 
Daniyal hussain

daniyal hussain

10/08/2012 19:14:00
Quote Anchor link
ja
 
G P

G P

10/08/2012 19:22:19
Quote Anchor link
float: center, bestaat niet :(
 
Reshad F

Reshad F

10/08/2012 19:56:14
Quote Anchor link
kijk is hiernaar http://jsfiddle.net/MNmBn/16/

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)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
img:nth-child(3n){
    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 :)
 
Ozzie PHP

Ozzie PHP

10/08/2012 19:56:20
Quote Anchor link
Ik heb het voor je opgelost.

Om iedere 5 images zet je een div met de class naam "image_row".

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>


Aan je css voeg je dit toe:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
.image_row {
  float: none;
  overflow: auto;
}


Another problem solved ;)
 
Reshad F

Reshad F

10/08/2012 20:04:20
Quote Anchor link
@ozzie waarom zo moeilijk terwijl je het gewoon met 1 klein css regeltje kan oplossen?
 
G P

G P

10/08/2012 20:41:38
Quote Anchor link
Bedankt voor jullie reacties.

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.
 
Ozzie PHP

Ozzie PHP

10/08/2012 21:09:36
Quote Anchor link
@Reshad: ik had niet aan jouw manier gedacht. Maar dat is css3??
 
G P

G P

10/08/2012 21:13:50
Quote Anchor link
Hahaha... Oplossing gevonden, ik was het veel te ver aan het zoeken :)

Hier vind je de oplossing

Geen float: left; maar simpelweg display: inline-block;
Gewijzigd op 10/08/2012 21:15:43 door G P
 
Ozzie PHP

Ozzie PHP

10/08/2012 21:20:17
Quote Anchor link
Goed gedaan! :)
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.