CSS (Cascading Style Sheets)
Justera objekt med olika höjd
När du placerar bilder, eller DIV med bild och text, i rader så blir det ofta problem med justeringen av objekten. Vissa objekt kan hamna mitt i raden eller under varandra.
Här visar vi 4 olika metoder att lösa problemet:
Justering med MIN-HEIGHT
Justering med :NTH-CHILD
Justering med COLUMN-COUNT
Justering med DISPLAY: INLINE-BLOCK och VERTICAL-ALIGN: TOP
Alla exempel nedan förutsätter att du använder DIV-boxar till innehållet.
Höjd på sista DIV i raden styr justeringen
Det här är ofta standardläget där en DIV med FLOAT: LEFT; används. Notera att den sista bilden i raden har en lägre höjd vilket medför att den bild som egentligen skulle hamna på nästa rad placeras under sista bilden i raden före.
Klicka på exemplet nedan för att hur övriga bilder justerats.
Klicka
här för att se exemplet (Välj att visa sidkällan/källkoden för att se all HTML- och CSS-kod)
CSS-koden:
#bildgalleri {
float: left;
width: 900px;
padding: 0 0 200px 0;
}
#bildbox {
float: left;
width: 16%;
margin: 1% 1% 0 0;
padding: 1%;
border: 2px solid rgba(0,0,0,0.2);
background: rgba(0,0,0,0.01);
border-radius: 5px;
}
/* Storlek på bilderna i bildboxarna */
#bildbox img {
width: 100%;
height: auto;
}
/* MOBILTELEFON och SMARTPHONE (portrait/stående) */
@media only screen and (max-width: 768px){
#bildgalleri {
width: 100%;
}
#bildbox {
float: left;
width: 90%;
margin: 0 0 2% 0;
padding: 10px 2% 10px 2%;
}
}
HTML-koden:
<div id="
bildgalleri">
<div id="
bildbox">
<img src="bild1.jpg" />
<p>Bildtexten här</p>
</div>
<div id="
bildbox">
<img src="bild1.jpg" />
<p>Bildtexten här</p>
</div>
<div id="
bildbox">
<img src="bild1.jpg" />
<p>Bildtexten här</p>
</div>
</div>
Justering med MIN-HEIGHT
En metod är att ange samma höjd för alla DIV-boxar med MIN-HEIGHT
Alla objekten i raden får samma höjd. Nackdelen är att det är svårt att veta höjden på det högsta innehållet. Om du lägger till mer text under en bild så kan höjden bli högre än det värde du angivit i min-height.
Klicka på exemplet nedan för att hur övriga bilder justerats.
Klicka
här för att se exemplet (Välj att visa sidkällan/källkoden för att se all HTML- och CSS-kod)
CSS-koden:
#bildgalleri {
float: left;
width: 900px;
padding: 0 0 200px 0;
}
#bildbox {
float: left;
width: 16%;
min-height: 270px;
margin: 1% 1% 0 0;
padding: 1%;
border: 2px solid rgba(0,0,0,0.2);
background: rgba(0,0,0,0.01);
border-radius: 5px;
}
/* Storlek på bilderna i bildboxarna */
#bildbox img {
width: 100%;
height: auto;
}
/* MOBILTELEFON och SMARTPHONE (portrait/stående) */
@media only screen and (max-width: 768px){
#bildgalleri {
width: 100%;
}
#bildbox {
float: left;
width: 90%;
margin: 0 0 2% 0;
padding: 10px 2% 10px 2%;
}
}
Justering med :NTH-CHILD
En metod är att använda :NTH-CHILD och ange att raden ska brytas efter angivet antal objekt. I exemplet nedan anges att det 5:e objektet ska vara det sista i raden.
Nackdelen med den här metoden är att du måste ange vilket antal DIV-boxar som ska visas i varje rad. Om du använder en responsiv design där sidbredden ökar eller minskar så kommer antalet objekt per rad ändå vara samma antal.
Klicka på exemplet nedan för att hur övriga bilder justerats.
Klicka
här för att se exemplet (Välj att visa sidkällan/källkoden för att se all HTML- och CSS-kod)
CSS-koden:
#bildgalleri {
float: left;
width: 900px;
padding: 0 0 200px 0;
}
#bildbox {
float: left;
width: 16%;
margin: 1% 1% 0 0;
padding: 1%;
border: 2px solid rgba(0,0,0,0.2);
background: rgba(0,0,0,0.01);
border-radius: 5px;
}
#bildbox:nth-child(5n+1) {
clear:left;
}
/* Storlek på bilderna i bildboxarna */
#bildbox img {
width: 100%;
height: auto;
}
/* MOBILTELEFON och SMARTPHONE (portrait/stående) */
@media only screen and (max-width: 768px){
#bildgalleri {
width: 100%;
}
#bildbox {
float: left;
width: 90%;
margin: 0 0 2% 0;
padding: 10px 2% 10px 2%;
}
}
Justering med COLUMN-COUNT
En metod är att använda COLUMN-COUNT och ange antal kolumner som ska användas. I exempelt nedan används 4 kolumner.
Notera att DIV-boxarna inte placeras radvis utan under varandra i kolumner. Objekten visas i en form av "murverk" (masonry).
Nackdelen med den här metoden är att du måste ange vilket antal kolumner som ska visas. Om du använder en responsiv design där sidbredden ökar eller minskar så kommer antalet kolumner ändå vara samma antal.
Klicka på exemplet nedan för att hur övriga bilder justerats.
Klicka
här för att se exemplet (Välj att visa sidkällan/källkoden för att se all HTML- och CSS-kod)
CSS-koden:
#bildgalleri {
float: left;
width: 900px;
padding: 0 0 200px 0;
column-count: 4;
column-gap: 2%;
}
#bildbox {
float: left;
width: 16%;
margin: 1% 1% 0 0;
padding: 1%;
border: 2px solid rgba(0,0,0,0.2);
background: rgba(0,0,0,0.01);
border-radius: 5px;
}
/* Storlek på bilderna i bildboxarna */
#bildbox img {
width: 100%;
height: auto;
}
/* MOBILTELEFON och SMARTPHONE (portrait/stående) */
@media only screen and (max-width: 768px){
#bildgalleri {
width: 100%;
}
#bildbox {
float: left;
width: 90%;
margin: 0 0 2% 0;
padding: 10px 2% 10px 2%;
}
}
Justering med DISPLAY: INLINE-BLOCK och VERTICAL-ALIGN: TOP
En metod är att använda DISPLAY: INLINE-BLOCK istället för FLOAT: LEFT för att placera objekten radvis horisontellt (display: inline-block används för att justera objekt horisontellt istället för vertikalt).
Du måste också använda VERTICAL-ALIGN: TOP för att justera det horisontella innehållet i överkant.
I exemplet anges DIV-boxarnas bredd till 150px (istället för 10%), detta för att fungera i en responsiv layout där sidas bredd varierar.
Klicka på exemplet nedan för att hur övriga bilder justerats.
Prova att ändra webbläsarens förnster för att se hur den responsiva layouten justerar bildernas placering i raderna.
Klicka
här för att se exemplet (Välj att visa sidkällan/källkoden för att se all HTML- och CSS-kod)
CSS-koden:
#bildgalleri {
float: left;
width: 100%;
padding: 0 0 200px 0;
}
#bildbox {
display: inline-block;
vertical-align: top;
width: 150px;
margin: 1% 1% 0 0;
padding: 1%;
border: 2px solid rgba(0,0,0,0.2);
background: rgba(0,0,0,0.01);
border-radius: 5px;
}
/* Storlek på bilderna i bildboxarna */
#bildbox img {
width: 100%;
height: auto;
}
/* MOBILTELEFON och SMARTPHONE (portrait/stående) */
@media only screen and (max-width: 768px){
#bildgalleri {
width: 100%;
}
#bildbox {
float: left;
width: 90%;
margin: 0 0 2% 0;
padding: 10px 2% 10px 2%;
}
}
Logga in
skriv ut »