4 plaatjes gelijkmatig verdelen

Status
Niet open voor verdere reacties.
damnsharp

damnsharp

Terugkerende gebruiker
Lid geworden
6 jan 2012
Berichten
1.394
Goedeavond,
Ben al een tijdje op het volgende aan het puzzelen. Ik krijg 4 plaatjes netjes verdeeld over de pagina maar laatste plaatje lijnt niet goed aan.
Zie de jsfiddle die ik heb gemaakt: http://jsfiddle.net/g3hxea5w/1/.
Bij rechter plaatje is rechts geel te zien; dat is niet de bedoeling.
Plaatje is wellicht helderder; zo moet het eruit zien:
plaatjes-voorbeeld.jpg

Ik vermoed dat ik met table-row aan de slag moet maar daar loop ik snel in vast.
Thanks!
 
Kun je hier verder mee...
Code: 
.imagebox {
    max-width: 1100px;
    margin: 0 auto;
    background: yellow;
}
#image {
    width: 25%;
    float: left;
    text-align: center;
}
#image img {
    max-width: 100%;
    height: auto !important;
    border: 0;
}
Of wil je echt een vaste hoogte van de imagebox wrapper?

Suc6

*** edit: als je witruimte tussen de foto's ziet dan komt dit omdat de fotobreedte kleiner is dan 25% van 1100px
Maak het scherm maar eens smaller dan is de witruimte verdwenen.
Als je in de css bij de img als eerste opneemt width: 100%; dan ben je de witruimte kwijt
 
Laatst bewerkt:
Ha Bron, thanks! Daar krijg ik het wel beter mee, nu is het netjes verdeeld!
Door text-align: center is er wel links en rechts een witruimte.
Kijk, met een float: left komen de plaatjes netjes naast elkaar te staan maar is de uitlijning ook links en ontstaat rechts ruimte.
Als ik eerste plaatje links tegen kantlijn wil en laatste plaatje rechts tegen kantlijn en de andere twee daar precies midden in is het lastiger voor mekaar te krijgen door mij. Als je daar een tip voor hebt graag, anders laat ik het zo.
 
Door text-align: center is er wel links en rechts een witruimte.
Kijk, met een float: left komen de plaatjes netjes naast elkaar te staan maar is de uitlijning ook links en ontstaat rechts ruimte.
Klik om te vergroten...
Dit komt omdat de foto's (in je jsfiddle) 225px breed zijn. Dit is kleiner dan 25% van de layout-breedte (275px). Daardoor krijg je witruimte.

De html heb ik erbij gezet voor andere helpmij bezoekers.
Code: 
<div class="imagebox">
    <div class="image"><img src="foto1.jpg" alt=""></div>
    <div class="image"><img src="foto2.jpg" alt=""></div>
    <div class="image"><img src="foto3.jpg" alt=""></div>
    <div class="image"><img src="foto4.jpg" alt=""></div>
</div>
De css heb ik aangepast voor foto's, responsive verdeelt over de breedte. De marge kun je zelf aanpassen.
Code: 
* {
    box-sizing: border-box;
}
.imagebox {
    max-width: 1100px;
    margin: 0 auto;
    padding-left: 1%; /* adjust voor centreren */
}
.image {
    float: left;
    width: 25%;
}
.image img {
    float: right;
    width: 96%; /* zie margin */
    max-width: 96%; /* zie margin */
    height: auto !important;
    border: 0;
    vertical-align: middle;
    margin-left: 4%; /* width + margin = 100% */
}
/* hieronder aanpassing linker foto */
.image:first-child {
    width: 24%;
}
.image:first-child img {
    width: 100%;
    max-width: 100%;
    margin-left: 0%;
}
Noot: bij .imagebox en .image mag je geen "height" opgeven anders krijg je vervormde foto's.

*** edit: een id mag maar 1x in je pagina voorkomen, dus van id="image" heb ik class="image" gemaakt.
 
Laatst bewerkt:
Vandaar @Bron! Thanks voor je duidelijke uitleg weer. En met de CSS code gaat het vast lukken zo te zien. Ik ga hem meteen uitproberen.
 
Ik zou het zelf toch iets anders aanpakken. Een prachtig voorbeeld is het bootstrap grid systeem, waarin je rijen en kolommen gebruikt die allemaal responsive zijn.
Dan heb je direct voor je website een standaard methode om een kolom indeling te maken.
Het enige waar je rekening mee moet houden is dat onder een .row direct de .col's komen te staan.

Code: 
/* ROWS */
.row { margin: 0 -15px 15px -15px; }
.row:after, .row:before { content: " "; clear: both; display: table; }

/* COLUMNS */
[class*='col_'] { 
    float: left;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;	
}
.col_12 { width: 100.000%; float: none; }
.col_11 { width: 91.6667%; }
.col_10 { width: 83.3333%; }
.col_09 { width: 75.0000%; }
.col_08 { width: 66.6667%; }
.col_07 { width: 58.3333%; }
.col_06 { width: 50.0000%; }
.col_05 { width: 41.6667%; }
.col_04 { width: 33.3333%; }
.col_03 { width: 25.0000%; }
.col_02 { width: 16.6667%; }
.col_01 { width: 8.33333%; }

Code: 
<div class="imagebox row">
    <div class="image col_03"><img src="foto1.jpg" alt=""></div>
    <div class="image col_03"><img src="foto2.jpg" alt=""></div>
    <div class="image col_03"><img src="foto3.jpg" alt=""></div>
    <div class="image col_03"><img src="foto4.jpg" alt=""></div>
</div>
 
Met rolfahtar eens. Overigens ging de vraag over de afbeeldingen die netjes in het grid geplaatst moesten worden (een eenvoudig grid is er al).
Als aanvulling: de negatieve margin bij .row ziet er alleen okee uit in combinatie met een container of container-fluid
Code: 
<div class="container">
    ...wat hierboven staat...
</div>

/* http://getbootstrap.com */
.container, .container-fluid {
   padding-right: 15px; padding-left: 15px;
   margin-right: auto; margin-left: auto;
}
@media (min-width: 768px) {
   .container { width: 750px; }
}
@media (min-width: 992px) {
   .container { width: 970px; }
}
@media (min-width: 1200px) {
   .container { width: 1170px; }
}
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan