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

CSS：最小宽度和绝对定位

1 个答案: