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/

更新

到目前为止找到了两个解决方案：

不要使用显示内联块，使用float并执行与Auto-growing margins when screen width get streched类似的操作但这意味着要实现一堆代码来获得自动边距调整
有了一些黑客，我有这个工作，围绕每个img元素的div和显示内联块应用于div而不是img。然后在每个div中我可以应用margin-top来调整高度。上面的JSFiddle链接已更新

Answer 1

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

相对会使它看起来像其他元素一样，如果它仍然没有它，但它的可见部分将根据顶部，底部，左侧和右侧移动。

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

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

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

2 个答案: