html - Custom CSS gallery -


I want to create a photo gallery for one of my projets, but I can not get it. What I want is something like this: http://i.imgur.com/mkncVTQ.png

I do not know how many photos will be but basically what it will be: - Put photo first in photo_div # 1 - Insert second in # 2 - goes to new line - Insert in # 3 - Insert 4 # 4 - Go to the next column and enter the first row - 5 in 5 - etc.

What I have made so far is the following code:

  & lt; Div id = "scroll_container" & gt; & Lt; Div id = "photo_0" square = "div_photo" & gt; & Lt ;! - Inside & Content - & gt; & Lt; / Div & gt; & Lt; / Div & gt;   

and CSS code:

  scroll_container {height: 100%; Width: 550px; Overflow-x: scroll; Overflow-y: hidden; } .div_photo {float: left; Width: 250px; Height: 250px; Limit: 1px solid black; Margins: 0 5px 5px 0; Status: Relative; Display: inline-block;  

But

But what I can get is a gallery with two lines.

Can you help me solve it?

Thanks

It looks like your images are always of the same size, And that your problem is just this special order that you want.

In that case, this can be a solution:

  .test {width: 40px; Height: 40px; Border: Solid 1px blue; Swim left; Margin: 2px; } .test: nth-child (4n + 3) {border color: red; Status: Relative; Top: 44px; Left: -92px; Margin-right: -44px; } .test: nth-child (4n + 4) {border color: red; Status: Relative; Top: 44px; Left: -46px; Margin-right: -44px; }   

The idea of ​​floating the first 2 elements, 5 and 6, and so on. <3 p> The third and fourth (and 7th and eighth) are placed in the relative position

Comments

Popular posts from this blog

c - Mpirun hangs when mpi send and recieve is put in a loop -

python - Apply coupon to a customer's subscription based on non-stripe related actions on the site -

java - Unable to get JDBC connection in Spring application to MySQL -