显示内联块时调整不同元素的垂直位置

Question

我有一堆 img 元素，我想在 div 内的一行中显示它们。所以我做了这样的事情

css:

#imageContainer {
            height: 90px;
            padding-left: 50px;
            padding-right: 50px;
            text-align: justify;
            text-justify: distribute-all-lines;
        }

                #imageContainer > img {
                    /*width: 150px;
                    height: 125px;*/
                    /*vertical-align: middle;*/
                    display: inline-block;
                    *display: inline;
                    zoom: 1;
                }

                #imageContainer:after {
                    content: '';
                    width: 100%;
                    display: inline-block;
                    font-size: 0;
                    line-height: 0;
                }
    html:
            <div id="imageContainer">
                <img class="imageOne" src="images/sample2.jpg" />
                <img class="imageTwo" src="images/sample.jpg" />
            </div>

这将确保无论我在 div 中放置多少 img 标签，它都会均匀分布在屏幕宽度上。现在我想做的是能够调整不同元素的垂直位置。我尝试在单个 img 标签中添加填充，但这会调整整行的位置。有没有办法解决这个问题？

JSFiddle：http://jsfiddle.net/g244H/

更新：

目前找到了两种解决方案：

1. 不要使用显示内联块，使用浮动并执行类似于Auto-growing margins when screen width get streched 的操作 但这意味着要实现一堆代码来获得自动边距调整

2. 通过一些技巧，我解决了这个问题，将 div 包围到每个 img 元素，并将显示内联块应用于 div 而不是 img。然后在每个 div 中，我可以应用 margin-top 来调整高度。上面的 JSFiddle 链接已更新

Answer 1

position: relative;
top: the-amount-that-you-want-it-to-move;

Relative 会让其他元素看起来好像它仍然在没有它的地方，但它的可见部分将根据顶部、底部、左侧和右侧移动。

Answer 2

对于您想要升高或降低的图像，您可以做一个。

margin-top:1em; margin-bottom:-1em

添加溢出：对#imageContainer.可见

同时添加position:relative; 当定位元素时，他们需要一个位置集，它们的父元素也是如此。

#imageContainer {
            position:relative;
            height: 90px;
            padding-left: 50px;
            padding-right: 50px;
            text-align: justify;
            text-justify: distribute-all-lines;
            overflow:visible
        }

     #imageContainer > img {
                position:relative;
                /*width: 150px;
                height: 125px;*/
                /*vertical-align: middle;*/
                display: inline-block;
                *display: inline;
                zoom: 1;
            }

你添加的相同数量减去对面。