Question

所以我有一个标题栏，就像[IMG ______ TITLE ______ IMG]

我有类似的东西，其中所有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 _______标题__________]

[______________________ IMG]

你可以看到最后一张图像仍然是最右边的，但由于某种原因，在包含div之外......有什么想法如何正确地水平对齐这些？

Answer 1

你可以在没有花车和一些简单定位的情况下做到这一点：

<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;}

以下是演示的链接：http://jsfiddle.net/76t8ca7h/

更新了小提琴：http://jsfiddle.net/76t8ca7h/3/

和新css：

.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;}

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

1 个答案: