Css 第三个元素在IE的下一行

因此，我有一个标题栏，类似于[IMG\uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuimg]

我有类似的东西，其中所有3个元素都在1个div中：

#left_image {
    display:block;
    width:80px;
    height:100%;
    float:left;
}

#middle_div {
    width:1030px;
    height:100%;
    text-align:center;
    display:inline-block;
}

#left_image {
    display:block;
    width:80px;
    height:100%;
    float:right;
}

但出于某种原因，只有在IE上，最后一张图片位于下一行，如：

[IMG\UUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUU

[[uuuuuuuuuuuuuuuuuuuuuuuuuuuuuiMg]

---

您可以看到最后一幅图像仍然位于最右侧，但由于某些原因，位于包含div之外。您知道如何正确地水平对齐这些图像吗？

您可以在不使用浮动和一些简单定位的情况下执行此操作：

<div class="wrapper">
    <div class="left">Left things</div>
    <div class="middle">Middle things</div>
    <div class="right">Right things</div>
</div>

.wrapper {width:100%;background-color:#eee;position:relative;}
.left,.middle,.right {display:inline-block;padding:10px;}
.middle {text-align:center;}
.right {position:absolute;right:0;}

---

您应该添加重现问题所需的最少代码。这些div是否需要指定宽度？你能用百分数吗？如果我把宽度加起来等于容器的宽度，这很好，但是如果我想中间的东西居中呢。你可以在演示中看到，它被移到了左边，我忽略了这一点。给我一点时间，我会为你找到一个更好的解决方案。我更新了我的答案，以更接近你想要的。

.wrapper {width:100%;min-width:100%;background-color:#eee;padding:0;margin:0;overflow:hidden;}
.left,.middle,.right {display:inline-block;vertical-align:top;float:left;}
.middle {text-align:center;width:60%;}
.left,.right {width:20%;background-color:#ccc;}
.right {float:right;}