Question

from a PHP file that I don’t have access to, I receive a bunch of <li> elements with a class of “liElHtml”. Contained in these are images, so essentially I receive this via AJAX:

<li class="liElHtml"><img src="some_img.png" /></li> 

is there anyway to stack these neatly/evenly in 3 rows without having a static width? The only way I’ve known how to do this by setting the combined width of the 3 <li>‘s to the <ul>. I’ve googled around and it seems a static width is the only way I see.

Unfortunately this has to be 3 rows at 100% width to fill the screen because it’s for phones.
Right now just to get it to work I set a static width so I have for the html:

<ul id="mainScreenUL">
</ul>

The CSS:

#mainScreenUL{
    list-style:none;
    width:150px;
}

#liElHtml{
   display:inline-block;
   width:50px;
   height:50px;
}

And the jQuery/javascript

$('#mainScreenUL').html(pic_data[1]);

The pic_data[1] is just one long string of <li class="liElHtml"><img src="some_img.png" /></li>

This gives me a somewhat desired effect, is there anyway I can set the width to width:100% on #mainScreenUL and get the <li>‘s to stack neatly into only 3 rows?
Thank you for taking the time to read this, any help is greatly appreciated.

Answer 1

if all li have the same height you could easily float them and assign a 33.33% width in this way

li {
   float: left;
   width: 33.33%;
}

then just remember to apply a float clearing to ul element