如何使元素內容在保持最小寬度的同時流動

通過使display：inline可以將元素包裝到下一行。爲例如如圖圖像下面如何使元素內容在保持最小寬度的同時流動

Each element is a span with min-width 20%

我們怎樣才能使內容包裝到線與保持最小寬度沿。我們還需要其他元素在上一個元素結束的位置開始。 Min-Width needs to be 20%

使用的CSS是：

span.block { 
       display:inline; 
       width:auto; 
       min-width:20%; 
       border:1px solid #cfcfcf; 
       line-height:25px; 
       margin:3px; 
       background-color:#3f3f3f; 
       color:#f1f1f1; 
       border-radius:3px; 
       padding-right:20px; 
}

這裏是小提琴手http://jsfiddle.net/yCvhB/57/

來源

2013-05-10 Padmalochan

豈不是都看傻了，如果有，如果文本適合上一行但整個500px的不單單下一行是一個空的黑條？ – JJJ 2013-05-10 09:41:10

已經給出500像素就是一個例子。認爲它是30px或％。 – Padmalochan 2013-05-10 09:42:09

這是你需要的嗎？ http://jsfiddle.net/yCvhB/55/show/將display：inline;更改爲display：inline-block; – Arbel 2013-05-10 09:43:02

我能想到的唯一解決方案是因爲它需要使元素足夠長的時間添加儘可能多的空間。

var minWidth = 300; 

var blocks = document.getElementsByClassName('block'); 
var numOfBlocks = blocks.length; 

for(var i = 0; i < numOfBlocks; ++i) { 
    var block = blocks[ i ]; 

    // make text not wrap temporarily so that the width is 
    // calculated correctly 
    block.style.whiteSpace = 'nowrap'; 

    while(block.offsetWidth < minWidth) { 
     block.innerHTML += ' &nbsp;'; 
    } 

    // reset whitespace style  
    block.style.whiteSpace = 'normal'; 
}

演示：http://jsfiddle.net/yCvhB/61/

來源

2013-05-10 10:14:33 JJJ

這對px很酷，但如何當我們以百分比給出最小寬度時，使其工作 – Padmalochan 2013-05-10 10:18:45

您必須計算百分比的像素值（參考元素的寬度乘以百分比）。不幸的是，如果用戶在頁面加載後重新調整瀏覽器窗口的大小，就沒有簡單的方法來使其工作。 – JJJ 2013-05-10 10:20:50

如何使元素內容在保持最小寬度的同時流動

回答

相關問題