可收缩 div 或单元格表

Question

嗨，

我有这个代码：

<div id="left"></div>
<div id="center"></div>
<div id="right"></div>

我想要做的是让#center 始终以最小尺寸显示，而如果 window 调整大小或以较小的分辨率显示，其他 2 个将折叠甚至消失。

这是我的 CSS:

div {display:table-cell;}
#left, #right {width:auto;}
#center {width:1460px;}

这在 1080p 屏幕上看起来不错，但在较小的屏幕（例如 1024 宽度的屏幕）上效果不佳，因为会显示滚动条。在那些情况下，我希望#center 覆盖整个宽度，而其他 2 个 div 完全折叠以腾出空间。仅使用 html 和 css 如何实现？

谢谢。

Answer 1

该隐，我认为如果我演示中间列的宽度较小，这将更容易显示。您可以轻松调整 CSS 以在 1460px 工作。

/* 
  1. Ensure center column has a fixed size
  2. If there is horizontal space greater than 460px,
     fill it equally with the left and right divisions
*/

.container {
  display: flex;
}

.container > div {
  height: 40px;
}

#left, #right {
  flex: auto;
  background: rgba(255, 0, 0, 0.5);
}

#center {
  flex-basis: 460px;
  background: black;  
}

<div class="container">
  <div id="left"></div>
  <div id="center"></div>
  <div id="right"></div>  
</div>

Answer 2

您可以这样使用 CSS flexbox：

#container {
  display: flex;
}

#left, #right {
  background-color: gray;
  flex-grow: 1;
  min-width: 0;
  overflow: hidden;
}

#center {
  background-color: yellow;
  min-width: 500px;
}

<div id="container">
  <div id="left">Left</div>
  <div id="center">Center</div>
  <div id="right">Right</div>
</div>

flex-grow:1 允许左右 div 增长并占据任何空 space.
min-width:0 允许左右 div 完全消失，即使它们里面有内容。
overflow:hidden 隐藏在 div 左右两侧溢出的任何内容，因为 div 缩小。
min-width:500px 确保中心 div 永远不会缩小到宽度 500px 以下。
中心 div 也永远不会超过 500px，因为左右 div 会增长以占据空 space.

另外，如果你想让左右div的宽度最大，让中间的div增长，也加上下面的：

flex-grow:1 到 #center 让它成长。
max-width:50px到#left,#right来cap左右宽度divs.

Here is a working example.

可收缩 div 或单元格表

contractible div or cell tables

html

css

width