6 replies [Last post]
thomas1971
thomas1971's picture
Offline
newbie
Netherlands
Last seen: 6 years 51 weeks ago
Netherlands
Timezone: GMT+1
Joined: 2014-10-27
Posts: 7
Points: 10

Hi,
I want to display some thumbnails in rows of 3. So i tried this. But it doesn't break the row.
1) Is 'clear' only for floating elements?
2) How should I break these thumbnail rows?

Thanks!
Thomas
---------------
.thumbnail {
width: 141px;
height: 141px;
background-color: #9CC;
margin: 12px;
display:inline-block;
}
.thumbnail:nth-child(3n+3) {clear:right;}

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 33 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

clear does nothing here

Simply wrap the t-nails in a container wide enough for three, but not wide enough for four.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

thomas1971
thomas1971's picture
Offline
newbie
Netherlands
Last seen: 6 years 51 weeks ago
Netherlands
Timezone: GMT+1
Joined: 2014-10-27
Posts: 7
Points: 10

Thanks. That's a good idea.

Thanks. That's a good idea. But still i would like to know how to break the row with nth().

ronit
ronit's picture
Offline
newbie
ahmedabad
Last seen: 6 years 51 weeks ago
ahmedabad
Timezone: GMT+5.5
Joined: 2014-10-29
Posts: 1
Points: 1

animation

First,Only t-nail use.Because not wide enough four cheer.
This site see:-http://www.2danimation-services.com

Thanks,
Regard,
The Cheesy Animation.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 33 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Not tested

Float the t-nails left and use the nth child selector as you did, but {clear: left;}.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

thomas1971
thomas1971's picture
Offline
newbie
Netherlands
Last seen: 6 years 51 weeks ago
Netherlands
Timezone: GMT+1
Joined: 2014-10-27
Posts: 7
Points: 10

So, it is not possible to

So, it is not possible to break a line of inline-block elements?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 33 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Not as I read the rules

CSS doesn't provide for inserting elements, and html reduces white spaces to a single [space]. You could alter the DOM with javascript inserting the <br> element where desired.

I think* you're asking css and html to do a job in a manner they're not suited for.

cheers,

gary

* I could be wrong; I was wrong once before. I thought I had screwed something up. Turns out, I hadn't. Laughing out loud ~g

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.