Question

我的目标是获得侧边栏布局，该布局应根据浏览器窗口宽度进行缩放。某些部件应具有缩放宽度，其他部件应具有静态宽度，而某些部件应缩放但具有最小/最大宽度。（如果有些人会根据其中的内容进行扩展，那也会很棒）

html：

<div id="table">
  <div id="row">
    <div id="sidebar">at least 90px width<br/>not more than 130px width</div>
    <div id="content">scale</div>
    <div id="logo">should be static 60px</div>
    <div id="sidebar2">at least 90px width</div>
  </div>
</div>

和css：

#table {
display: inline-table;
width: 100%;
}

#row {
display: table-row;
}

#table #row div {
display: table-cell;
}

#sidebar {
width: 10%;
min-width: 90px;
max-width: 130px;
}

#content {
width: 70%;
}

#logo {
min-width: 60px;
background-color: #FAB6B8;
}

#sidebar2 {
min-width: 90px;
width: 20%;
}

问题：

max-width似乎对分配了display:table-cell的dom元素没有影响。（我猜）

我尝试使用另一个div，跨越实际的细胞div。这会导致问题，即单元格完美缩放，但内容div的左侧不会粘到第一个侧边栏。（同样的问题，如果我把“max-width div”放在单元格内）

使用float: left layout也不起作用。（如果窗口太小，浮动会中断;如果我使用div来保护它，请不要缩放）

有没有办法在不使用js的情况下解决这个问题？
在#row中加入一个div，没有其他CSS可以用于div，它根据内容进行扩展。可悲的是，如果只有文字，它会在每个单词后断开。如何防止这种情况并能够设置最大宽度并隐藏溢出？

Answer 1

我自己找到答案：

关键是对元素应用绝对宽度，这应该得到最大宽度。它并不完美，因为具有绝对宽度的div不会缩放，直到具有相对宽度的div达到它们的最小宽度，但我想这是唯一的方法。

这么简单。对不起，麻烦......

如何将最大宽度设置为“display：table-cell”元素？

1 个答案: