CSS磚石問題

我最近發現了一個整潔的方式做使用列磚石佈局，因爲在這裏找到：http://w3bits.com/css-masonry/。我通過在懸停時爲每個項目添加一個帶有文本的疊加層來擴展此佈局。除了2個問題外，此功能運行良好：CSS磚石問題

疊加層比底部的圖像略大。即使在使用不同的圖像時，這仍然存在。
轉換不起作用;懸停效果突然顯示並隱藏。

關於我的代碼的一些解釋：

我試圖要避免這些問題，就像這一次，都無濟於事添加margin: 0; border:0; padding:0整個文檔。 .item具有margin: 0 0 20px以提供每個物品之間的垂直間距。
因爲.item-overlay要求position:absolute工作，並且position:absolute要求定位父元素，我已將position:relative添加到.item。就我所知，這不會影響任何超出允許覆蓋層正確顯示的內容。
.item-overlay使用display:flex垂直和水平集中它的內容，但這不應影響佈局。

有人能幫助我弄清楚什麼是錯的代碼？的jsfiddle：https://jsfiddle.net/nattanyz/sfn47me9/1/

2017-04-21 Nat Tan

在img和過渡opacity使用vertical-align: top而不是display

html { 
 
    box-sizing: border-box; 
 
} 
 

 
*, 
 
*:before, 
 
*:after { 
 
    box-sizing: inherit; 
 
} 
 

 
body { 
 
    background-color: honeydew; 
 
    font-size: 16px; 
 
    line-height: 120%; 
 
    color: #333; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.wrapper { 
 
    min-height: 100vh; 
 
    width: 80vw; 
 
    max-width: 1200px; 
 
    margin: auto; 
 
    border: 0; 
 
    padding: 0; 
 
    column-count: 3; 
 
    column-gap: 20px; 
 
} 
 

 
.item { 
 
    display: block; 
 
    margin: 0 0 20px; 
 
    border: 0; 
 
    width: 100%; 
 
    position: relative; 
 
} 
 

 
.item-overlay { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    width: 100%; 
 
    background-color: rgb(51, 51, 51, 0.6); 
 
    color: white; 
 
    opacity: 0; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
    align-items: center; 
 
    background-color: rgba(51, 51, 51, 0.6); 
 
    transition: opacity 300ms ease; 
 
} 
 

 
.item:hover .item-overlay { 
 
    opacity: 1; 
 
} 
 

 
.project-img { 
 
    width: 100%; 
 
    margin: 0; 
 
    border: 0; 
 
    padding: 0; 
 
    vertical-align: top; 
 
} 
 

 
.project-name { 
 
    font-weight: bold; 
 
} 
 

 
.project-category { 
 
    font-size: 0.75em; 
 
    text-transform: uppercase;

<body> 
 
    <div class="wrapper"> 
 
    <div class="item"> 
 
     <img class="project-img" src="https://images.pexels.com/photos/297755/pexels-photo-297755.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb" /> 
 
     <div class="item-overlay"> 
 
     <p class="project-name">Project Name</p> 
 
     <p class="project-category">Commercial</p> 
 
     </div> 
 
    </div> 
 
    <div class="item"> 
 
     <img class="project-img" src="https://images.pexels.com/photos/297755/pexels-photo-297755.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb" /> 
 
     <div class="item-overlay"> 
 
     <p class="project-name">Project Name</p> 
 
     <p class="project-category">Commercial</p> 
 
     </div> 
 
    </div> 
 
    <div class="item"> 
 
     <img class="project-img" src="https://images.pexels.com/photos/297755/pexels-photo-297755.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb" /> 
 
     <div class="item-overlay"> 
 
     <p class="project-name">Project Name</p> 
 
     <p class="project-category">Commercial</p> 
 
     </div> 
 
    </div> 
 
    <div class="item"> 
 
     <img class="project-img" src="https://images.pexels.com/photos/297755/pexels-photo-297755.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb" /> 
 
     <div class="item-overlay"> 
 
     <p class="project-name">Project Name</p> 
 
     <p class="project-category">Commercial</p> 
 
     </div> 
 
    </div> 
 
    <div class="item"> 
 
     <img class="project-img" src="https://images.pexels.com/photos/297755/pexels-photo-297755.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb" /> 
 
     <div class="item-overlay"> 
 
     <p class="project-name">Project Name</p> 
 
     <p class="project-category">Commercial</p> 
 
     </div> 
 
    </div> 
 
    <div class="item"> 
 
     <img class="project-img" src="https://images.pexels.com/photos/297755/pexels-photo-297755.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb" /> 
 
     <div class="item-overlay"> 
 
     <p class="project-name">Project Name</p> 
 
     <p class="project-category">Commercial</p> 
 
     </div> 
 
    </div> 
 
    <div class="item"> 
 
     <img class="project-img" src="https://images.pexels.com/photos/297755/pexels-photo-297755.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb" /> 
 
     <div class="item-overlay"> 
 
     <p class="project-name">Project Name</p> 
 
     <p class="project-category">Commercial</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body>

來源

2017-04-21 04:12:07

謝謝！ 'vertical-align：top'修復了它。但是，爲什麼沒有它的原始代碼工作？ –

圖像被視爲內嵌內容，並且內嵌內容的底部有空間用於字符上的小尾跡（如p，j，q等）。 'vertical-align：top'或'display：block'將刪除該空間。 @NatTan –

的覆蓋比在底部的圖像稍大。即使在使用不同的圖像時，這仍然存在。

問題出在圖像本身上，它的高度比容器小。嘗試將一些background-color放在容器上，您會看到覆蓋層高度與其父層相同。

轉換不起作用;懸停效果突然顯示並隱藏。

無法實現對CSS display過渡，其他替代將使用opacity。我修改了你的代碼，請嘗試。

html { 
 
\t box-sizing:border-box; 
 
} 
 

 
*, *:before, *:after { 
 
\t box-sizing:inherit; 
 
} 
 

 
body { 
 
\t background-color:honeydew; 
 
\t font-size: 16px; 
 
\t line-height: 120%; 
 
\t color: #333; 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 

 
.wrapper { 
 
\t min-height: 100vh; 
 
\t width: 80vw; 
 
\t max-width:1200px; 
 
\t margin: auto; 
 
\t border: 0; 
 
\t padding: 0; 
 
\t column-count: 3; 
 
\t column-gap: 20px; 
 
} 
 

 
.item { 
 
\t display:block; 
 
\t margin: 0 0 20px; 
 
\t border:0; 
 
\t width:100%; 
 
\t position:relative; 
 
    background-color: black; 
 
} 
 

 
.item-overlay { 
 
\t position:absolute; 
 
\t top:0; 
 
\t left:0; 
 
\t bottom:0; 
 
\t width:100%; 
 
\t background-color: rgba(51,51,51,0.6); 
 
\t color:white; 
 
\t opacity:0; 
 
\t transition:300ms ease opacity; 
 
    
 
    display: flex; 
 
\t flex-direction:column; 
 
\t justify-content:center; 
 
\t align-items:center; 
 
} 
 

 
.item:hover .item-overlay { 
 
\t opacity: 1; 
 
\t background-color: rgba(51,51,51,0.6); 
 
} 
 

 
.project-img { 
 
\t width:100%; 
 
\t margin:0; 
 
\t border:0; 
 
\t padding:0; 
 
} 
 

 
.project-name { 
 
\t font-weight:bold; 
 
} 
 

 
.project-category { 
 
\t font-size:0.75em; 
 
\t text-transform:uppercase;

<body> 
 
\t <div class="wrapper"> 
 
\t \t <div class="item"> 
 
\t \t \t <img class="project-img" src="https://images.pexels.com/photos/297755/pexels-photo-297755.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"/> 
 
\t \t \t <div class="item-overlay"> 
 
\t \t \t \t <p class="project-name">Project Name</p> 
 
\t \t \t \t <p class="project-category">Commercial</p> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t <div class="item"> 
 
\t \t \t <img class="project-img" src="https://images.pexels.com/photos/297755/pexels-photo-297755.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"/> 
 
\t \t \t <div class="item-overlay"> 
 
\t \t \t \t <p class="project-name">Project Name</p> 
 
\t \t \t \t <p class="project-category">Commercial</p> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t <div class="item"> 
 
\t \t \t <img class="project-img" src="https://images.pexels.com/photos/297755/pexels-photo-297755.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"/> 
 
\t \t \t <div class="item-overlay"> 
 
\t \t \t \t <p class="project-name">Project Name</p> 
 
\t \t \t \t <p class="project-category">Commercial</p> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t <div class="item"> 
 
\t \t \t <img class="project-img" src="https://images.pexels.com/photos/297755/pexels-photo-297755.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"/> 
 
\t \t \t <div class="item-overlay"> 
 
\t \t \t \t <p class="project-name">Project Name</p> 
 
\t \t \t \t <p class="project-category">Commercial</p> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t <div class="item"> 
 
\t \t \t <img class="project-img" src="https://images.pexels.com/photos/297755/pexels-photo-297755.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"/> 
 
\t \t \t <div class="item-overlay"> 
 
\t \t \t \t <p class="project-name">Project Name</p> 
 
\t \t \t \t <p class="project-category">Commercial</p> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t <div class="item"> 
 
\t \t \t <img class="project-img" src="https://images.pexels.com/photos/297755/pexels-photo-297755.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"/> 
 
\t \t \t <div class="item-overlay"> 
 
\t \t \t \t <p class="project-name">Project Name</p> 
 
\t \t \t \t <p class="project-category">Commercial</p> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t <div class="item"> 
 
\t \t \t <img class="project-img" src="https://images.pexels.com/photos/297755/pexels-photo-297755.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"/> 
 
\t \t \t <div class="item-overlay"> 
 
\t \t \t \t <p class="project-name">Project Name</p> 
 
\t \t \t \t <p class="project-category">Commercial</p> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
</body>

來源

2017-04-21 04:21:00 nvl

非常感謝！嗯，爲什麼圖像比容器小？高度不應該默認爲自動？ –

，因爲寬度設置爲'100％'，高度會按照比例自動縮放，所以圖像的大小將成比例 – nvl

回答

相關問題