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

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

.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的整个长度。

来源

2015-01-20 Jordan

这是在线播放的基准线：http://www.smashingmagazine.com/2012/12/17/css-baseline-the-good-the-bad-and-the-ugly/ – TylerH 2015-01-20 19:05:07

感谢您的信息。我仍然需要弄清楚如何获得红色边框锚（“.row a”）来填充可用空间。 – Jordan 2015-01-20 19:19:27

我不认为这可以做到不失去你喜欢的基准线。如果你将'a'标签设置为'height：300px;'你会看到原因。但是表格单元格的高度都是相同的，也许可以在嵌入式控件的周围进行设计。 – fnostro 2015-01-20 19:33:07

既然你想让<a>盖<div>的整个高度/宽度的空间，但你的<div>没有确切高度设置将在它反映每个个体图像的高度，因为你不能嵌套DIV标签在A标签内。这是我的建议。

删除在每个<a>标签的前面有多余的<div>。从而使<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。

.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

这应该合并它。

来源

2015-01-20 19:37:31 natejd04

我只是对这张桌子，桌子，桌子的东西很满意。我把CSS裁减了一半。这是辉煌的东西。谢谢。 – Jordan 2015-01-20 19:58:09

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

回答

相关问题