Question

我正在制作图像视图，并且在对齐图像方面遇到了一些麻烦。当我连续两个相同的图像时，它将被对齐，但是当图像不同时，第二个图像将低于第一个图像。这是屏幕截图screenshot。这是我的html和CSS 的 HTML

<div id="wrapper">
        <div id="images">
            <div class="image" onClick="showimage('users/images/username/battlefield4_maars.png','battlefield4_maars.png','3.91MB','png');">
                <img src="users/images/username/battlefield4_maars.png">
                <div class="normaltext">battlefield4_maars.png</div>
            </div>
            <div class="image" onClick="showimage('users/images/username/dark_souls_2.jpg','dark_souls_2.jpg','363KB','jpg');">
                <img src="users/images/username/dark_souls_2.jpg">
                <div class="normaltext">dark_souls_2.jpg</div>
            </div>
            <div class="image" onClick="showimage('users/images/username/thief.jpg','thief.jpg','393KB','jpg');">
                <img src="users/images/username/thief.jpg">
                <div class="normaltext">thief.jpg</div>
            </div>
        </div>
    </div>

CSS

#images {
    margin-top: 20px;
    display: inline-block;
}
.image {
    height: 200px;
    width: 140px;
    border: 1px solid #cccccc;
    border-radius: 3px;
    background: #fff;
    display: inline-block;
    word-wrap:break-word;
    padding: 10px;
    cursor: pointer;
}
.image img {
    width: 140px;
    height: 140px;
}

任何人都知道这里有什么问题吗？

Answer 1

添加：

#images {display:block;}
.image {
    vertical-align: top;
}

HTML图像不是同一图像时未对齐

1 个答案: