缩格或细胞表

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有一个最大宽度，并允许中心股利成长，添加以下还有：

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

Here is a working example。