這些圖像的底部爲什麼排列起來？

我想知道爲什麼這些圖像的底部排列在單元格的行上？細節在下面的代碼片段：這些圖像的底部爲什麼排列起來？

.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

這些圖像的底部爲什麼排列起來？

回答

相關問題