Question

我有两个问题：首先是为什么这个HTML在IE和Chrome中的呈现方式不同其次，如何对齐2个按钮，使它们与图像的高度相同，并在两侧旁边齐平。

<div class="wrapper">
    <div class="button-wrapper">
        <input type="submit" value "1"/>
    </div>
    <div class="image-wrapper">
        <img src="http://2.bp.blogspot.com/_8LIsmeu9Fzs/SdadTd-wVDI/AAAAAAAAALA/9Pt_3nCrsz0/s400/BURGER.jpg" />
    </div>
    <div class="button-wrapper">
        <input type="submit" value "2"/>
    </div>
</div>

.wrapper {
    display:inline-block;
    height: 200px;
    background-color: blue;
}
.image-wrapper {
    display:inline-block;
    height: 200px;
    background-color: pink;
    padding: 5px;
}
.button-wrapper {
    display:inline-block;
    height: 200px;
    background-color: cyan;
    padding: 5px;
}
img {
    height: 200px;
}
input {
    height: 200px;
    width: 40px;
}

由于

Answer 1

使用display: inline-block时，您应该注意垂直对齐。元素的总大小是它的宽度/高度加上填充加边框加边距，所以为了适应内容，你的包装器的高度应该是210px。

以下代码已修复，因此在不同的浏览器上运行相同：

.wrapper {
    display:inline-block;
    height: 210px;
    background-color: blue;
    vertical-align: top;
}
.image-wrapper {
    display:inline-block;   
    vertical-align: top;
    height: 200px;
    background-color: pink;
    padding: 5px;
}
.button-wrapper {
    display:inline-block;
    vertical-align: top;
    height: 200px;
    background-color: cyan;
    padding: 5px;
}
img {
    height: 200px;
}
input {
    height: 200px;
    width: 40px;
}

<div class="wrapper">
    <div class="button-wrapper">
        <input type="submit" value "1"/>
    </div>
    <div class="image-wrapper">
        <img src="http://2.bp.blogspot.com/_8LIsmeu9Fzs/SdadTd-wVDI/AAAAAAAAALA/9Pt_3nCrsz0/s400/BURGER.jpg" />
    </div>
    <div class="button-wrapper">
        <input type="submit" value "2"/>
    </div>
</div>

CSS布局问题（图像两侧各1个按钮）

1 个答案: