html - 可收缩的 div 或单元格表

Question

嗨，

我有这个代码:

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

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

这是我的 CSS:

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

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

谢谢。

Answer 1

Cain，我认为如果我演示中心列的宽度较小，这会更容易展示。您可以轻松调整 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>