检查一下
dom结构是这样的
<div class="outer">
<div class="left">aaa</div>
<div class="middle">middlemiddlemiddlemiddlemiddlemiddle</div>
<div class="right">bbb</div>
</div>
- 外层是固定宽度，
- left和right分别在左边和右边
- 所有三个部分都包含可变宽度的内容。
中间部分不应溢出或将右侧部分推出容器。
理想情况下，在溢出时中间会有省略号。
我看不出在没有最大宽度的长中间部分的情况下如何避免将右侧部分推出，但这会破坏右侧部分的可变宽度。
我该如何解决？
最佳答案
你会使用 flexbox 吗？
它具有您需要的属性。将 growth 属性设置为 0 并将 shrink 属性设置为 1，也许？
-webkit-box-flex: 0;
-moz-box-flex: 0;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
也许你可以玩一下，here .
关于html - tricky css : 3 sections in a row, 所有 3 都可以是可变宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21744335/