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

该隐，我认为如果我为中心栏演示较小的宽度，这将更容易显示。您可以轻松地将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增长并占用任何空白区域。
min-width:0允许左右div完全消失，即使它们里面有内容。
overflow:hidden隐藏任何溢出左右div之外的内容，因为div会缩小。
min-width:500px确保中心div永远不会缩小到宽度500px以下。
中心div也永远不会超过500px，因为左右div将会占据空白区域。

此外，如果您希望左右div具有最大宽度并允许中心div增长，请添加以下内容：

flex-grow:1到 #center 以允许它增长。
max-width:50px到＃left，＃right 以限制左右div的宽度。

Here is a working example

可收缩的div或细胞表

2 个答案: