CSS：最小寬度和絕對定位

Question

<style type="text/css"> 
html, body { 
margin: 0; 
padding: 0 
} 

.column1 
{ 
position:absolute; 
left:0; 
top:0; 
width:100px; 
background-color:black; 
} 
.column2 
{ 
position:absolute; 
left:100px; 
right:100px; 

background-color:gray; 
} 

.middle { 

min-width:900px; 
} 

.column3 
{ 
position:absolute; 
right:0; 
top:0; 
width:100px; 
background-color:black; 
} 

#container 
{ 

text-align: center; 
width:100%; 
} 

.clearfix 
{ 
position:relative; 
display: inline-block; 
} 
</style> 

<div id="container" class="clearfix"> 
    <div class="column1">left</div> 
    <div class="column2"> 
    <div class="middle"> 
    middle 
    </div> 
    </div> 
    <div class="column3">right</div> 
</div> 

我想知道是否有可能的最小寬度的中央列會使它，所以右列將堅持屏幕，因爲它的確如此，但直到中心欄是900px。如果小於這個值，那麼水平調整窗口的大小就會截斷右列。

這是可能與CSS只？

非常感謝！

Answer 1

絕對定位的元素不受鄰居影響，因此不能影響右側列與中心寬度。

但是，只需將min-width:1100px放在您的#container div上即可輕鬆完成此操作。