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

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

online mediaspecialist

Medisch Contact Medisch Contact is de belangrijkste opiniërende en informerende mediatitel voor artsen, met onder meer een wekelijks verschijnend tijdschrift, een dagelijkse nieuwsbrief, banensites, spraakmakende evenementen, een website met doorlopende nieuwsvoorziening, blogs, podcasts, et cetera. Medisch Contact wordt uitgegeven door de artsenfederatie KNMG en functioneert onder een redactiestatuut dat de journalistieke onafhankelijkheid garandeert. Naast ingezonden kopij bevat Medisch Contact artikelen en nieuwsberichten van de hand van zes eigen journalisten. Het complete team met journalisten, eindredactie, webredactie, vormgeving/beeldredactie, secretariaat en hoofdredactie bestaat uit 23 personen. KNMG De Koninklijke Nederlandsche Maatschappij tot bevordering der Geneeskunst (KNMG) is een federatie van zeven medische

Bekijk vacature »

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

31/03/2023 01:59:34
 
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.