不能对齐跨度正确

这是我的网页：http://jsfiddle.net/5RKnQ/。如果你将鼠标悬停在相应的头像图片，你会想象这样的事情： Example 不能对齐跨度正确

上的jsfiddle，宽度好像是坏了，我的浏览器正常工作。无论如何，我想尽可能以最好的方式在盒子内部安排蓝色跨度，使外部div适应其宽度并尽可能节省空间。

来源

2012-02-10 Chobeat

请出示代码。 – 2012-02-10 18:00:33

您是否可以在执行此操作时包含相关代码以及您可能做出的任何尝试。 – 2012-02-10 18:00:59

opps sorr，我忘了链接。 – Chobeat 2012-02-10 18:02:36

我似乎无法更新您的jsfiddle，今天的jsfiddle一直样的一个烂摊子，即使我能够用它来编写代码。

（编辑 - 登录后工作）：http://jsfiddle.net/HQ6Py/

我不知道是否有一个CSS的方式做你想做的，但这里是一些脚本，似乎工作。基本上，您可以检查每个跨度的实际最右边位置并跟踪最大的位置，然后根据该宽度设置宽度。

请注意，div的最大尺寸受到“最大宽度：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 
});

来源

2012-02-10 18:52:22

如果浮动跨度内，并申请一个最小宽度/最大宽度的容器，这样够了？

来源

2012-02-10 18:02:58 Brian

这就是我的尝试，但正如你所看到的，右边有空白 – Chobeat 2012-02-10 18:03:45

它打破，因为你需要把外部链接到的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">

你不仅可以把“汽车”上外的宽度跨度最大宽度？

我还以为你将无法做你的CSS想要什么。如果它是关于重新排列列表以获得较少的可用空间，那么您将需要使用JavaScript。

这里是我的jsfiddle：http://jsfiddle.net/ayottepl/XLBha/

来源

2012-02-10 18:39:18 ayottepl

不能对齐跨度正确

回答

相关问题