css布局问题,着急

知否知否
  • 19

<ul class="flex">

<li>a</li>
<li>b</li>
<li>c</li>

</ul>

针对高度:
1.ul高度固定
2.a的li高度固定
3.b的li高度会变化(a+b的高度不会超过ul)

要求: c占满剩余的高度,不用js可以写出来吗

回复
阅读 1.7k
3 个回答
✓ 已被采纳
ul {
    display: flex;
    height: 300px;
    width: 100px;
    flex-direction: column;
}
ul > li {
    flex-grow: 0;
}
li:nth-child(1) {
    height: 100px;
}
li:nth-child(2) {
    word-wrap: break-word;
}
li:nth-child(3) {
    flex-grow: 1;
}

你可以测试一下,应该有更好的方法。

而且这样子的兼容性应该很差。

少年,难道你没看过flexbox么?

cc长空
  • 1.9k

给ul设overflow: hidden;,li{c}设个足够大的高度不就完了么,2333

宣传栏