我最近发现了一种使用列进行砌体布局的简洁方法，如下所示：http://w3bits.com/css-masonry/。我通过在悬停时为每个项目添加带文字的叠加层来扩展此布局。除了2个问题之外，这很有效：
关于我的代码的一些解释：
margin: 0; border:0; padding:0添加到整个文档中以试图防止像这样的问题，但无济于事。 .item margin: 0 0 20px有.item-overlay来提供每个项目之间的垂直间距。position:absolute需要position:absolute才能运作，并且position:relative需要定位父元素，因此我已将.item添加到.item-overlay。据我所知，除了允许叠加层正确显示外，这并不会影响任何事情。display:flex使用/**
* Returns an Image object that can then be painted on the screen.
* The url argument must specify an absolute {@link URL}. The name
* argument is a specifier that is relative to the url argument.
* <p>
* This method always returns immediately, whether or not the
* image exists. When this applet attempts to draw the image on
* the screen, the data will be loaded. The graphics primitives
* that draw the image will incrementally paint on the screen.
*
* @param url an absolute URL giving the base location of the image
* @param name the location of the image, relative to the url argument
* @return the image at the specified URL
* @see Image
*/
public Image getImage(URL url, String name) {
try {
return getImage(new URL(url, name));
} catch (MalformedURLException e) {
return null;
}
}
纵向和横向集中其内容，但这不会影响布局。有人可以帮我弄清楚代码有什么问题吗？ JSFiddle：https://jsfiddle.net/nattanyz/sfn47me9/1/
答案 0 :(得分：0)
在vertical-align: top上使用img并转换opacity代替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>
答案 1 :(得分：0)
- 叠加层略大于底部的图像。即使使用不同的图像，这种情况仍然存在。
问题在于图像本身，它的高度小于容器。尝试在容器上放置一些background-color，您会看到叠加高度与它的父级相等。
- 过渡不起作用;悬停效果突然显示和隐藏。
您无法在css display上实现转换，其他选择将使用opacity。我修改了你的代码，请尝试。
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;
background-color: black;
}
.item-overlay {
position:absolute;
top:0;
left:0;
bottom:0;
width:100%;
background-color: rgba(51,51,51,0.6);
color:white;
opacity:0;
transition:300ms ease opacity;
display: flex;
flex-direction:column;
justify-content:center;
align-items:center;
}
.item:hover .item-overlay {
opacity: 1;
background-color: rgba(51,51,51,0.6);
}
.project-img {
width:100%;
margin:0;
border:0;
padding:0;
}
.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>