Autoexposure and Autoshirink from a div?

Question

I have lines with an image of the same size, if you do not have enough photos in a row, the photo should expand in width to occupy the full space. There may be 3 inner divs or 4 inner divs.

// CSS Section .cont { position : absolute; background : #E4EDF7; border : 1px solid grey; height: 200px; width:400px; } .ibox { float: left; background : green; margin: 5px; border: 1px solid grey; height: 50px; width: 100px; } // HTML Markup <div class="cont"> <div class="ibox"></div> <div class="ibox"></div> <div class="ibox"></div> <div class="ibox"></div> <div class="ibox"></div> </div> 

Answer 1

Ok, I experimented a bit and came up with a quick solution to the autosave problem:

 .cont { position : absolute; background : #E4EDF7; border : 1px solid grey; height: 200px; width:400px; display:table; } 

in the class "cont" just add the last bit of "display: table"; and the outer box should resize to the added content.

Answer 2

Brains911 suggested what you really want. I interpreted your “photo” as 1 photograph (last) expanding in width, which is the original answer below. However, if you want the "photos" (plural, all 3) to expand, then there is a CSS3 answer that I added below.

Original answer (CSS2: only the last photo)

Add this below ibox css:

 .ibox:first-child + .ibox + .ibox:last-child { width: 210px; /* 2 x width + 2 x margin */ } 

It will only target ibox and change the width if there is 3 instead of 4. See the script where I had to change the width your cont to fit your fields, but you should get this idea.

Additional answer (CSS3: expand all 3 photos)

Change the standard width in the .ibox definition to what you want in 3 photos ( in my example script I used 137px ), then add this css for the 4 photos script:

 .ibox:nth-last-of-type(4), .ibox:nth-last-of-type(4) ~ .ibox { width: 100px; } 

It counts back from the end, and if there are 4 of them, it will start the style for 4 instead of the default value.

Answer 3

The question is a bit confusing, but I assume that you want all the photos in the row to expand equally to fill the row if there are only 3, not 4 ...

So, without knowing the exact number of div.ibox (3 or 4), there is no easy / reliable way to achieve this with only css (what I know) if you cannot use some kind of css3 - Flex Flex Box Model - it can be not an option if you require higher browser compatibility.

With a bit of jquery, this will be pretty fast, for example.

 var container = $('.cont'), iboxCount = container.find('.ibox').length, photoWidth = container.width()/iboxCount; //TODO: adjust for margin/padding container.find('.ibox').css('width',photoWidth); 

Hope this helps.