html - 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您的#containerdiv 来做到这一点。