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上即可轻松完成此操作。