Question

我正在研究这个布局：

<div id="outer">
   <div id="leftBar"></div>
   <div id="middleContainer">
      <div id="middle"></div>
   </div>
</div>

使用此样式表：

#outer{
    background-color:yellow;
    white-space:nowrap; 
}
#leftBar{
    background-color:purple;
    display:inline-block;
    height:300px;
    width:100px;   
}
#middle{
   background-color:blue;
   height:300px;
   width:100px;
   margin:0 auto;
}
#middleContainer{
    background-color:green;
    width:100%;
    height:100%;
    display:inline-block;
}

http://jsfiddle.net/thirtydot/8ac2e/2/

有一个（紫色）侧边栏需要保持固定，中间（蓝色）div需要在剩余空间中居中。我已将蓝色div包装在（绿色）间距div中，但如果我将其宽度设置为100％则会从页面溢出，因此它无法正常流动。

我已经尝试过使用侧杆的绝对定位，但也会将定心关闭。

如何让蓝色div在剩余空间中居中？如果可能的话，我宁愿不使用float-left或float-right。

Answer 1

这是花车的经典情况。它只是最灵活的。使用float: left作为侧边栏，overflow: hidden作为绿色middleContainer。然后这个休息。并将所有display: inline-block更改为display: block;

http://jsfiddle.net/8ac2e/4/

如果您的侧边栏具有灵活的尺寸，div具有不同的高度等等，这甚至可以工作。

Answer 2

根据您需要考虑的浏览器支持，您可以使用calc()通过从#middleContainer减去#leftBar的宽度来计算100%的宽度像这样：

#middleContainer{
    background-color:green;
    width: calc(100% - 100px);
    height:100%; 
    display:inline-block;
}

小提琴：http://jsfiddle.net/8ac2e/1/

有关calc（）的更多信息，包括浏览器支持：https://developer.mozilla.org/en-US/docs/Web/CSS/calc

Answer 3

你可以绝对定位左栏，并向middleContainer添加一个左边距等于左栏的宽度，并制作middleContainer显示块。见http://jsfiddle.net/8ac2e/5/

#leftBar{
  background-color:purple;
  display:inline-block;
  height:300px;
  width:100px;
  position: absolute;
}
#middleContainer{
  background-color:green;
  margin-left:100px;
  height:100%;
  display:block;
}

Answer 4

您可以使用CSS表解决它。

#container{
    display: table;
    background-color:yellow;
    width:100%;
    height:100%;
    white-space:nowrap;

}
#leftBar{
    background-color:purple;
    display:table-cell;
    height:300px;
    width:20%;
}
#middle{

    background-color:blue;
    height:300px;
    width:100px;
    margin:0 auto;
}
#middleContainer{
    background-color:green;
    width:80%;
    height:100%;
    display:table-cell;
}

将div放在另一个固定div旁边

4 个答案: