为什么这些图像的底部排列

Question

我想知道为什么这些图像的底部排列在单元格行上？详细信息在下面的代码片段中：

.item {
    display: block;
    font-size: 0.75em;
}
.row {
    margin: 10px;
    margin-bottom: 25px;
    border: solid orange 2px;
    overflow:hidden;
}
.row div {
    margin: 0px;
    padding: 0px;
    display: table-cell;
    border: solid blue 2px;
    width: 16.666%
}
.row a {
    text-align: center;
    margin: 5px;
    padding: 20px;
    border:solid red 2px;
    display:block;
}
.row img {
    width: 100%;
}

    <div class="row">
        <div><a class="item"><img src="http://dummyimage.com/600x600/000/fff" /><span>Applied Panel - Base Left Side</span></a></div>
        <div><a class="item"><img src="http://dummyimage.com/600x600/000/fff" /><span>Applied Panel - Base Right Side</span></a></div>
        <div><a class="item"><img src="http://dummyimage.com/600x300/000/fff" /><span>Base - 3 Drawer Stack w-Applied Door</span></a></div>
        <div><a class="item"><img src="http://dummyimage.com/300x600/000/fff" /><span>Base - 3 Drawer Stack</span></a></div>
        <div><a class="item"><img src="http://dummyimage.com/600x600/000/fff" /><span>Base - 4 Drawer Stack w-Applied Door</span></a></div>
        <div><a class="item"><img src="http://dummyimage.com/600x600/000/fff" /><span>Base - 4 Drawer Stack</span></a></div>
    </div>

我很欣赏这种行为。我想保留它。我真的很想理解它，我需要红框（".row a"）垂直拉伸其父div 的整个长度。

Answer 1

由于您想使<a>覆盖<div>的整个高度/宽度空间，但您的<div>没有设置确切的高度，它将反映其中每个单独图像的高度，并且由于您不能将 DIV 标签嵌套在 A 标签中。这是我的建议。

删除每个<a>标记前面的额外<div>。

<div class="row">
   <a class="item"><img src="http://dummyimage.com/600x600/000/fff" /><span>Applied Panel - Base Left Side</span></a>
    <a class="item"><img src="http://dummyimage.com/600x600/000/fff" /><span>Applied Panel - Base Right Side</span></a>
    <a class="item"><img src="http://dummyimage.com/600x300/000/fff" /><span>Base - 3 Drawer Stack w-Applied Door</span></a>
    <a class="item"><img src="http://dummyimage.com/300x600/000/fff" /><span>Base - 3 Drawer Stack</span></a>
    <a class="item"><img src="http://dummyimage.com/600x600/000/fff" /><span>Base - 4 Drawer Stack w-Applied Door</span></a>
   <a class="item"><img src="http://dummyimage.com/600x600/000/fff" /><span>Base - 4 Drawer Stack</span></a>
</div>

然后更正 CSS，使 <a> 标记的行为类似于您之前<div>。

.item {
    display: block;
    font-size: 0.75em;
}
.row {
    margin: 10px;
    margin-bottom: 25px;
    border: solid orange 2px;
    overflow:hidden;
}
.row a {
    text-align: center;
    margin: 5px;
    padding: 20px;
    border:solid red 2px;
    width: 16.666%;
    display: table-cell;
}
.row img {
    width: 100%;
}

请注意，我删除了.row div并将其与.row a

这应该有效。