如何防止重疊主要內容中浮動的內容？

我有以下HTML：如何防止重疊主要內容中浮動的內容？

<td class='a'> 
    <img src='/images/some_icon.png' alt='Some Icon' /> 
    <span>Some content that's waaaaaaaaay too long to fit in the allotted space, but which can get cut off.</span> 
</td>

它應該顯示如下：

[Some content that's wa [ICON]]

我有以下的CSS：

td.a span { 
    overflow: hidden; 
    white-space: nowrap; 
    z-index: 1; 
} 

td.a img { 
    display: block; 
    float: right; 
    z-index: 2; 
}

當我調整瀏覽器切斷文本，它會在<td>的邊緣而不是在<img>之前切斷，這會使<img>重疊內容爲<span>。我嘗試過各種各樣的padding和margin，但沒有任何效果。這可能嗎？

注：這是非常很難添加一個<td>只包含這裏的<img>。如果這很容易，我只是這樣做:)

來源

2010-07-30 James A. Rosen

看那'clear'指令。我不是CSS專家，但在''中放置一個浮點數似乎是在尋找麻煩。 – msw 2010-07-30 00:22:40

漂浮和清除在''中很好，除了Netscape，當你有浮動和位置時它會混亂，相對於'' ......主知道爲什麼。 – Pat 2010-07-30 00:33:18

可能overflow: hidden不工作，因爲你正在將它應用到內聯元素。

一個解決方案可能是將該跨度放在div中，給出該分區overflow: hidden。或者將跨度改爲div。您可能仍需要爲div提供右邊距圖像的寬度。

如果沒有white-space: nowrap屬性，它會容易得多。有沒有什麼可能的方式可以重新設計你的應用程序，所以它不需要使用它？

來源

2010-07-30 00:25:13 thomasrutter

將''更改爲'display：block'完美運作！我還爲圖像添加了一點「填充左」，但這與問題沒有多大關係。 – 2010-07-30 16:42:48

試試這個：

td.a { 
    position: relative; 
} 

td.a span {  
    display: block; 
    overflow: hidden; 
    white-space: nowrap; 

    position: relative; 
    z-index: 1; 

    padding-right: 20px; /* This should be the width of your image */ 
} 

td.a img { 
    position: absolute; 
    z-index: 2; 
    top: 0; 
    right: 0;  
}

它將把圖像您<td>的最右邊，並在<span>的右填充將保持圖像從文本重疊。

位置的原因：在<td class="a">中的相對位置使其成爲位置的座標系：絕對<img>。您還需要一個位置類型（相對，絕對或固定）以使z-index起作用。

如果不行，那會是把圖像作爲背景圖像上<span>像這樣一個選項：

td.a span {  
    display: block; 
    overflow: hidden; 
    white-space: nowrap; 

    padding-right: 20px; /* This should be the width of your image */ 
    background: url(your-img.png) no-repeat 100% 0; /* right-top aligned background */ 
}

來源

2010-07-30 00:31:28 Pat

如何防止重疊主要內容中浮動的內容？

回答

相關問題