html - 为什么这些图像的底部排成一行？

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”)来垂直拉伸(stretch)它的父 div 的整个长度。

Answer 1

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

删除多余的 <div> 每个人面前都有 <a> 标签。

<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 合并

这应该有效。