制作一个动态的尺寸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后

回答

相关问题