Hei,
jeg har slitt i et par timer nå med hva jeg tror det burde være en (flaut) enkel løsning på.
Jeg har to divs der den ene flyter til venstre, den andre til høyre.
http://bildr.no/thumb/SUJpYXB0.jpeg
Teksten "Studio Galleri 1" er div'en "left", alle bildene ligger i div'en "right".
Problemet er at teksten ikke vil legge seg på samme linje som bildene, som skal fremgå av bildet ovenfor. (Teksten legger seg altså ikke helt på toppen av siden)
HTML:
CSS:
Er det noen kloke hoder der ute som ser en løsning? Jeg har googlet og googlet, men ikke kommet til noen løsning.
Takk!
jeg har slitt i et par timer nå med hva jeg tror det burde være en (flaut) enkel løsning på.
Jeg har to divs der den ene flyter til venstre, den andre til høyre.
http://bildr.no/thumb/SUJpYXB0.jpeg
Teksten "Studio Galleri 1" er div'en "left", alle bildene ligger i div'en "right".
Problemet er at teksten ikke vil legge seg på samme linje som bildene, som skal fremgå av bildet ovenfor. (Teksten legger seg altså ikke helt på toppen av siden)
HTML:
Kode
<html> <head> <link href='https://fonts.googleapis.com/css?family=Playfair+Display' rel='stylesheet' type='text/css'> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="wrap"> <div id="left"> <h1>Studio Galleri<br/> 1</h1> </div> <section id="right"> <img src="images/1.jpg"> <img src="images/2.jpg"> <img src="images/3.jpg"> <img src="images/4.jpg"> <img src="images/5.jpg"> <img src="images/6.jpg"> <img src="images/7.jpg"> <img src="images/8.jpg"> <img src="images/9.jpg"> <img src="images/10.jpg"> <img src="images/11.jpg"> <img src="images/12.jpg"> <img src="images/14.jpg"> <img src="images/15.jpg"> </section> </div> </body> </html>
CSS:
Kode
.wrap { position: relative; } #left { top: 0; float:left; width:20%; font-family: Georgia; font-size: 2.5vw; } #right { position: absolute; width:80%; float: right; top: 1; right: 0; /* Prevent vertical gaps */ line-height: 0; -webkit-column-count: 5; -webkit-column-gap: 0px; -moz-column-count: 5; -moz-column-gap: 0px; column-count: 5; column-gap: 0px; } #right img { /* Just in case there are inline attributes */ width: 100% !important; height: auto !important; } @media (max-width: 1200px) { #right { -moz-column-count: 4; -webkit-column-count: 4; column-count: 4; } } @media (max-width: 1000px) { #right { -moz-column-count: 3; -webkit-column-count: 3; column-count: 3; } } @media (max-width: 800px) { #right { -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; } } @media (max-width: 400px) { #right { -moz-column-count: 1; -webkit-column-count: 1; column-count: 1; } }
Takk!