Question

我想知道为什么这些图像的底部排成一排的细胞？详细信息位于以下代码段中：

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 1

由于您希望<a>覆盖<div>的整个高度/宽度空间，但您的<div>没有确切的高度设置，它会反映每张图片的高度在它内部，因为你不能在A标签内嵌套DIV标签。这是我的建议。

删除每个 <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> 。 < / p>

.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

合并

这应该有用。

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

1 个答案: