html - 在 Internet Explorer 5 上将 DIV 彼此对齐

Question

我需要将两个 div 对齐。我通过使用以下代码实现了它:

Fiddle.js

CSS:

.wrapper {
display: table;
width: 100%;
border:5px solid blue;
}

.left {
display: inline-block;
width:10%;
height:160px;
display: table-cell;
border:5px solid red;
}

.right {
vertical-align:top;
display: inline-block;
height:160px;
display: table-cell;
border:5px solid grey;
}

HTML:

<div class="wrapper">
    <div class="left">DIV #1</div>
    <div class="right">DIV #2</div>
</div>

这适用于所有浏览器，除了我们在 IE5 模式下运行的 IE，因为我们使用了一些 Web-Dynpros，不幸的是，它需要这个引擎才能正确呈现。然而，Internet Explorer 并没有像我希望的那样显示 div。在 IE 中它看起来像下图:

Image

Answer 1

你可以试试这个:

.wrapper {
    display: table;
    width: 100%;
    border:5px solid blue;
    height:300px;
}
.box
{
   border:5px solid green;
  height:auto;
  float:left;
  width: 80%;
  height:250px;
}
.left {
    display: inline-block;
    width:20%;
    height:100px;
    display: table-cell;
    border:5px solid red;
    float:left;
}
.right {
    vertical-align:top;
    display: inline-block;
    height:100px;
    display: table-cell;
    border:5px solid grey;
    float:right;
    margin-top:110px;
   position:absolute;
   margin-left:100px;
   width:300px;
}

DEMO HERE