1
我有一张头带显示图像和标题的卡片以及一个包含链接的容器。我希望将卡片“Mochi”和“Codex”自然地堆叠在一起（不是彼此重叠）。所以在同一列中将会有两张小卡片与另一列中较大卡片的大小相等。我怎样才能让我的牌堆叠在一起？
我该如何让卡片自然地在另一个之上流动？我试图做的立场：绝对，但它只是弄乱我的牌。另外，当我在每个链接上进行悬停时，我都有一个下划线，但是在构建这些卡后，当我将鼠标悬停在链接上时，我没有下划线。 希望是有道理的。这里是我的JFiddle：https://jsfiddle.net/j5L6m2ju/3/
感谢
这里的HTML：
<div class="card">
<div class="header1" class="grayscale">
<h1>Quad</h1>
</div>
<div class="container1">
<ul>
<li><a href="">vxcgxcgxfgfgdfgdfg</a></li>
<li><a href="">sdfsdfsdfsdfsdf</a></li>
<li><a href="">sdfsdfsdfsdfsdfsdf</a></li>
<li><a href="">vfdfgdfgdfgdfgd</a></li>
<li><a href="">dfgdfgdfgdfgdfg</a></li>
</ul>
</div>
</div>
<div class="card">
<div class="header2" class="grayscale">
<h1>Mochi</h1>
</div>
<div class="container2">
<ul>
<li><a href="">fsdfsdfsdfsdfsdfsd</a></li>
</ul>
</div>
</div>
<div class="card">
<div class="header3" class="grayscale">
<h1>Codex</h1>
</div>
<div class="container3">
<ul>
<li><a href="" target="blank">sdgfsdfsdfsdfsdfsdfsd</a></li>
<li><a href="" target="blank">vfdgdfgdfgdfgdfgdfgdfg</a></li>
</ul>
</div>
</div>
<div class="card">
<div class="header4" class="grayscale">
<h1>New York Family</h1>
</div>
<div class="container4">
<ul>
<li><a href="">sdfsdfsdfsdfsdfsdf</a></li>
<li><a href="">fgdfgdfgdfgdfgdf</a></li>
<li><a href="">sfgsdfsdfsdfsdfsd</a></li>
</ul>
</div>
</div>
这里的CSS：
div.card {
width: 240px;
/*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
border: 1px solid #f2f2f2;
text-align: center;
margin:10px;
border-radius: 15px;
filter: gray;
filter: grayscale(1);
-webkit-filter: grayscale(1);
display:inline-block;
}
div.card:hover {
filter: none;
-webkit-filter: grayscale(0);
}
div.header1 {
background-color: #4CAF50;
color: white;
padding: 10px;
font-size: 20px;
background: url(../images/Quad.jpg) no-repeat;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
}
div.header2 {
background-color: #4CAF50;
color: white;
padding: 10px;
font-size: 20px;
background: url(../images/Mochi.jpg) no-repeat;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
position: relative;
}
div.header3 {
background-color: #4CAF50;
color: white;
padding: 10px;
font-size: 20px;
background: url(../images/codex_card.jpg) no-repeat;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
position:relative;
}
div.header4 {
background-color: #4CAF50;
color: white;
padding: 10px;
font-size: 20px;
background: url(../images/NYF.jpg) no-repeat;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
position:relative;
}
div.container1 {
font-size:12px;
padding: 5px;
}
div.container2 {
font-size:12px;
padding: 5px;
position:relative;
}
div.container3 {
font-size:12px;
padding: 5px;
position:relative;
}
div.container4 {
font-size:12px;
padding: 5px;
position:relative;
}
div.container1 .container2 .container3 .container4 li {
margin:5px;
margin-bottom: 10px;
}
div.container1 .container2 .container3 .container4 a {
text-decoration:none;
padding-bottom: 4px;
}
div.container1 .container2 .container3 .container4 li:hover {
-o-transition:.4s;
-ms-transition:.4s;
-moz-transition:.4s;
-webkit-transition:.4s;
transition:.4s;
}
HTTPS如果不是千篇一律：/ /jsfiddle.net/j5L6m2ju/5/ –