gpt4 book ai didi

html - 使动态大小的 div 在周围的 div 中溢出,之后有两个固定的 div

转载 作者:太空宇宙 更新时间:2023-11-04 09:58:58 25 4
gpt4 key购买 nike

我有以下内容:

周边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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com