html - 具有绝对位置和显示表格的div中的水平居中

Question

我需要一个布局:

1. 一种是固定的，一种是流体，如示例代码。
2. 并且布局的高度需要像示例代码一样展开。

问题是这个示例代码在 IE 中无法运行。布局不能居中。有没有更好的解决方案？

HTML:

 <div id="wrapper" >
     <div id="left" >
        this is fixed
     </div>
     <div id="right" >
        this is fluid 
     </div>
 </div>

CSS:

 #wrapper {
     max-width :700px ;
     width :100% ;
     display : table;
     position :absolute ;
     left :0 ;
     right :0 ;
     margin-left :auto ;
     margin-right :auto ;
     height:100%;
 }
 #left , #right{
     display : table-cell;
     position :relative ;
 }
 #left {
     background:#123456;
     width :215px ;
 }
 #right {
     background:#dedede;
     width: 100%;
 }

Here is my sample code

Answer 1

实际上，您只需要在包装器内 float 一个元素，然后将您希望显示的任何内容放在包装器的右侧、外部。

Demo Fiddle

给定 HTML:

<div class='wrapper'>
    <div class='left'>left hand content goes here</div>
    other content goes here
</div>

只需使用 CSS:

html,body{
    width:!00%;
    height:100%;
    margin:0;
    text-align:center;
}
.wrapper{
    width:700px;
    height:100%;
    background:grey;
    margin:0 auto;
    text-align:left;
}
.left{
    float:left;
    background:#123456;
    width :215px ;
    height:100%;
    background:yellow;
}