製作一個動態的尺寸div溢出在一個具有兩個固定div的周邊div後

我有以下內容：製作一個動態的尺寸div溢出在一個具有兩個固定div的周邊div後

around div 100％動態div與標籤... | fixed div 30px |固定格30px。

我希望能夠改變瀏覽器的寬度，縮小周圍的div，並用標籤摺疊動態div。沒有任何我嘗試似乎沒有爲動態div設置寬度。

|動態div ... | fix1 | fix2 |

到：

|動力... | fix1 | fix2 |

我已經嘗試過使用浮點數和表格表格，但動態單元格不會小於其內容的寬度而不設置靜態寬度。

注意：動態div包含一個A標記。

來源

2016-07-20 John Smith

這是你在找什麼？

HTML

<html> 
    <head></head> 
    <body> 
    <div class="main-container"> 
     <div class="dynamic"> 
     <p>Content content content content content content content content content content content content content content</p> 
     </div> 
     <div class="fixed"> 
     <p>This is fixed</p> 
     </div> 
     <div class="fixed"> 
     This is also fixed 
     </div> 
    </div> 
    </body> 
</html>

SCSS

.main-container { 
    display: flex; 
    align-items: center; 
    flex-wrap: no-wrap; 
    .dynamic { 
    width: 100%; 
    min-width: 0; 
    p { 
     text-overflow: ellipsis; 
     overflow: hidden; 
     white-space: nowrap; 
    } 
    } 
    .fixed { 
    flex-basis: 30px; 
    padding: 5px; 
    } 
}

http://codepen.io/zsawaf/pen/VjXjbp

請注意，你可以把任何你想要的動態容器內。

來源

2016-07-20 17:14:51 zsawaf

感謝您的快速回復，但是當我縮小瀏覽器的寬度時，「內容內容」只是文字包裝而不是省略號。 –

啊，我的不好。我會解決它。 – zsawaf

已更新。確定你決定用什麼來替換p標籤，添加我有的相同規則。我建議尋找flexbox，浮動有點過時。 – zsawaf

製作一個動態的尺寸div溢出在一個具有兩個固定div的周邊div後

回答

相關問題