縮格或細胞表

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。