Не удается выровнять правильные расстояния

Question

это - моя страница: http://jsfiddle.net/5RKnQ/. Если вы наведите указатель мыши на изображение аватара, вы увидите что-то вроде этого:

На jsfiddle ширина кажется сломанной, на моем браузере работает правильно. В любом случае, я хотел бы организовать эти синие пролеты внутри коробки наилучшим образом, адаптируя внешний div к их ширине и экономя как можно больше места.

Answer 1

Я не могу обновить jsfiddle, jsfiddle был своего рода беспорядок сегодня, хотя я был в состоянии использовать его, чтобы написать этот код.

(редактирование - работа после входа в системе): http://jsfiddle.net/HQ6Py/

Я не уверен, если есть CSS способ сделать то, что вы хотите, но вот некоторые сценарии, который, кажется, работает. В основном, вы проверяете фактическую крайнюю позицию каждого диапазона и отслеживаете самую большую, а затем устанавливаете ширину на основе этого.

Обратите внимание, что максимальный размер div ограничивался «max-width: 28%», что и помешало ему в JSFiddle - удалить это из ваших стилей и заменить абсолютное значение пикселя.

$(".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 
}); 

Answer 2

Если вы плаваете внутренние части и применяете минимальную ширину/максимальную ширину к контейнеру, этого было бы достаточно?

Answer 3

Это сломано, потому что вы должны поместить внешние ссылки в jsfiddle, не так:

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

но

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

Вы можете не только поставить «авто» на ширине внешнего span с максимальной шириной?

Я думал, что вы не сможете делать то, что хотите в css. Если речь идет о переупорядочивании списка, чтобы получить меньше свободного места, вам нужно будет использовать javascript.

Вот мой jsfiddle: http://jsfiddle.net/ayottepl/XLBha/