![]() |
#1 |
Enthusiast
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 29
Karma: 496864
Join Date: Mar 2012
Location: Virginia
Device: none
|
floating multiple images
I have a group of 4 authors' photos that I want right floated at the top of their article. It looks fine, but just realized they are in reverse order. So I wrapped another div around the group and right floated it and left floated the others, but still getting reverse order.
Want: Auth1 Auth2 Auth3 Auth4 Getting: Auth4 Auth3 Auth2 Auth1 Ideas? Thanks. <div class="figgroup"> <div class="fig"> <img src="../Images/auth1.jpeg" /> <p class="caption">Author1</p> </div> <div class="fig"> <img src="../Images/auth2.jpeg" /> <p class="caption">Author2</p> </div> <div class="fig"> <img src="../Images/auth3.jpeg" /> <p class="caption">Author3</p> </div> <div class="fig"> <img src="../Images/auth4.jpeg" /> <p class="caption">Author4</p> </div> </div> div.fig { display: table; float: right; } div.fig p { display:table-caption; caption-side:bottom; } div.figgroup fig {float:left;} div.figgroup {float:right;} |
![]() |
![]() |
![]() |
#2 |
A Hairy Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 3,347
Karma: 20171571
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 15/11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
If you want them in order from left to right, wouldn't you want them to "float: left". That would put each image the farthest left it could go, and then everything else to it's right.
Code:
div.fig { display: table; float: left; } div.fig p { display:table-caption; caption-side:bottom; } |
![]() |
![]() |
Advert | |
|
![]() |
#3 |
Enthusiast
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 29
Karma: 496864
Join Date: Mar 2012
Location: Virginia
Device: none
|
But I'm floating them on the right side
text text text text text photo1 photo2 photo3 photo4 text text text text text text text text text text text so I'm floating the figs left and the div right div.figgroup fig {float:left;} div.figgroup {float:right;} |
![]() |
![]() |
![]() |
#4 | |
A Hairy Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 3,347
Karma: 20171571
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 15/11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
Quote:
I assume it's a typo in your example, but just make sure div.figgroup fig is actually named as "div.figgroup div.fig" I haven't tested that, but I hope it helps. |
|
![]() |
![]() |
![]() |
#5 |
Enthusiast
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 29
Karma: 496864
Join Date: Mar 2012
Location: Virginia
Device: none
|
Duh! Thanks. You know how when you've looked at something so long that you are just never going to see it? That was one of those. Works perfectly now.
Thank you! |
![]() |
![]() |
Advert | |
|
![]() |
|
![]() |
||||
Thread | Thread Starter | Forum | Replies | Last Post |
Importing multiple images | John123 | Workshop | 3 | 02-24-2013 10:14 AM |
Resizing multiple images but only if larger than...? | arash84 | Workshop | 5 | 08-21-2012 06:51 PM |
Floating images in MOBI output for Kindle | DerAmateur | Recipes | 1 | 01-16-2011 02:38 PM |
Any Epub creators support floating images? | richough3 | ePub | 3 | 08-23-2010 12:42 PM |
Importing multiple images | pedgarcia | Sigil | 5 | 10-28-2009 12:38 PM |