不能對齊跨度正確

這是我的網頁：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

不能對齊跨度正確

回答

相關問題