展開一列以填充沒有固定寬度的空白內容？

我有一個場景，我一直試圖找出通過任何可能的方式，無論是html表/浮動/顯示：表。我有一個3列的行，我想要外部的列來包裝裏面的內容，而中間的列要擴展來填充所有的空白空間。展開一列以填充沒有固定寬度的空白內容？

但是，我正在尋找一個沒有固定寬度的解決方案，因爲這個對象將被嵌套多次，在這種情況下，整體寬度會縮小。在三列中，如果有關係的話，我會一直知道最右邊一列的寬度。

這裏是什麼，我試圖做一個小提琴：

http://jsfiddle.net/gHUxy/2/

我知道Flexbox的看起來就像是這個東西做但它只是不夠廣泛但對我來說，使用它。它甚至有可能嗎？

編輯 - 我不需要支持IE6/7

來源

2012-08-31 user842800

你可以使用jQuery來實現它。請包含最新的jQuery Lib。

<html> 
<head> 
    <style type="text/css"> 
    section { 
     display:table; 
     width: 100%; 
     border:1px solid red; 
    } 

    div { 
     display: table-cell;   
    } 

    .leader { 
     background: grey; 
    } 

    .right{ 
     float: right; 
    } 
    .left { 
     float:left; 
    } 
    </style> 
    <script type="text/javascript"> 
    $(document).ready(function() { 
     $(".leader").width($("section").width() - ($(".left").width() +$(".right").width())); 
    }); 
    </script> 
</head> 
<body> 
<section> 
    <div class="left"> 
     Variable wrappable content 
    </div>    
    <div class="leader"> 
     <!--empty space--> 
    </div>    
    <div class="right"> 
     <!--fixed length--> 
     Date 
    </div> 
</section> 
</body> 
</html>

來源

2012-08-31 18:37:40 Mahbub

我試過這個，但它似乎沒有工作（即時通訊使用鉻）：http://jsfiddle.net/gHUxy/6/ – user842800

嗨，你有沒有包含最新的jQuery庫？你可以從http://jquery.com/download/下載它。 – Mahbub

是的，你點擊jsfiddle鏈接？ – user842800

你可以嘗試設置是不你的「中間」列1px列的width。這將迫使他們只能擴展到適合他們的內容。下面是一個示例，HTML：

<table class = "main"> 
    <tr><td class = "notmid">Glee Glee Glee Glee Glee Glee</td><td>is</td><td class = "notmid">awesome!</td></tr> 
</table>

CSS：

html, body { 
    width: 100%; 
} 
.main { 
    width: 100%; 
} 
.main .notmid { 
    width: 1px; 
    white-space: nowrap; 
}

還有一點演示：little link。

希望有任何幫助！

來源

2012-08-31 18:31:55 Chris

嗯有趣的是，我試過這個，但不幸的是，如果第一列是超過一個單詞它包裹每個單詞後。但是，感謝這個想法，或許可以通過某種方式來擴展它。問題是如果內容足夠長，可能實際需要包裝的內容 – user842800

@ user842800請參閱編輯。基本上，只需將'white-space：nowrap;'添加到'.notmid'。演示也會更新。 – Chris

好吧，我認爲這隻會幫助文本從未包裝的情況，但有時如果時間太長，它需要自然包裝。 – user842800

展開一列以填充沒有固定寬度的空白內容？

回答

相關問題