我有以下内容:
周边div 100% |带有标签的动态 div... |固定 div 30px |固定 div 30px。
我希望能够改变浏览器的宽度，缩小周围的 div 并折叠带有标签的动态 div。如果不为动态 div 设置宽度，我尝试的任何事情似乎都不起作用。
|动态分区... |修复1 |修复2 |
到:
|动态... |修复1 |修复2 |
我尝试过使用 float 和表格、表格单元格，但如果不设置静态宽度，动态单元格的宽度永远不会小于其内容的宽度。
注意:动态 div 包含一个 A 标签。
最佳答案
这是您要找的吗？
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
请注意，您可以将任何您想要的内容放入动态容器中。
关于html - 使动态大小的 div 在周围的 div 中溢出，之后有两个固定的 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38486603/