Can't align spans correctly

Question

this is my page: http://jsfiddle.net/5RKnQ/ . If you hover over the avatar image, you will visualize something like this:

On jsfiddle, width seems to be broken, on my browser works correctly. Anyway i would like to arrange those blue spans inside the box in the best way possible, adapting the outer div to their width and saving as much space as possible.

Answer 1

It's broken because you need to put the external links into jsfiddle, not this :

<link rel="stylesheet" type="text/css" href="/css/mollio/main.css">

but

<link rel="stylesheet" type="text/css" href="http://www.[website].com/css/mollio/main.css">

You can't only put "auto" on the width of the outer span with max-width?

i thought you'll be unable to do what you want in css. If it's about reorder list to get less free space, then you'll need to use javascript.

Here's my jsfiddle : http://jsfiddle.net/ayottepl/XLBha/

Answer 2

如果将跨度浮动到内部，然后对容器应用最小宽度/最大宽度，就足够了吗？

Answer 3

I can't seem to update your jsfiddle, jsfiddle's been kind of a mess today, even though I was able to use it to write this code.

(edit - works after logging in): http://jsfiddle.net/HQ6Py/

I am not sure if there's a CSS way to do what you want, but here is some script that seems to work. Basically, you check the actual rightmost position of each span and keep track of the largest one, then set the width based on that.

Note that the maximum size of the div was being constrained by "max-width:28%" which is what was messing it up in JSFiddle - remove that from your styles and replace with an absolute pixel value.

 $(".username").hoverIntent({
    over: function(e) {
        var minLeft, maxWidth = 0,
            list = $(this).find(".title_list");

        // start the fadeIn first otherwise the positions won't be available
        list.fadeIn(300);

        list.find('span').each(function() {
            var left = $(this).position().left,
                width = $(this).outerWidth() + left;

            if (maxWidth < width) {
                maxWidth = width;
            }
        });
        list.css("width", maxWidth);

    },
    out: function(e) {
        $(this).find(".title_list").fadeOut(300);
    },
    timeout: 3000
});