Question

我有三个div：

.container（display:table），

.left，.right（display:table-cell）;

对于.left我使用了80％，.right是20％。在左边div我有很多百分比宽度的项目。如果我添加大约5个项目一切正常，我可以调整浏览器窗口的大小，但当我有大约25个项目时，右侧消失。

我没有添加html，因为它太长了。请在JSFiddle上查看结果。我该如何解决这个问题？

.container {
    border: 1px solid gray;
    display: table;
    width: 100%;
}

.left {
    display: table-cell;
    width: 80%;
    background: yellow;
}

.right {
    display: table-cell;
    width: 20%;
    background: red;
}

.items {
    width: 40%;
    height: 100px;
    background: blue;
    display: inline-block;
    margin-right: 15px;
}

.scroll {
    width: 100%;
    overflow-x: scroll;
    white-space: nowrap;
}

Answer 1

如果您将fixed元素的table-layout property更改为.container，则会解决问题：

Updated Example

.container {
  border: 1px solid gray;
  display: table;
  table-layout: fixed;
  width: 100%;
}

具有固定百分比的表格单元格不适用于许多项目

1 个答案: