Question

我的卡片带有显示图像和标题的标题以及包含链接的容器。我想要卡片“Mochi＆＃39;和＆＃39; Codex＆＃39;自然地堆叠在一起（不是字面上彼此叠加）。因此，同一列中会有两张小卡片，与同一列中较大卡片的大小相等。

如何让卡片自然地相互流动？我尝试做位置：绝对，但它只会弄乱我的牌。此外，当我在每个链接上盘旋时，我有一个下划线，但在构建这些卡片后，当我将鼠标悬停在链接上时，我没有下划线。希望有道理。这是我的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;

}

Answer 1

砌砖效应是你想要以类似于pinterest布局的方式实现的最佳方法，使用列数：和column-gap：property

; Workaround for maps

user=> (flatten (seq {:name "Hubert" :age 23}))
(:name "Hubert" :age 23)

.masonry { /* Masonry container */
    column-count: 4;
    column-gap: 1em;
}

.item { /* Masonry bricks or child elements */
    background-color: #eee;
    display: inline-block;
    margin: 0 0 1em;
    width: 100%;
}

Read this for more

Your questions fiddle modified using column count

我刚刚添加了一个包含列数的包装器：3并添加了column-break：avoid;多数民众赞成

列数给出了将div分成多少列和column-break用于设置天气，如果在给定空间下不适合，列的内容应分为两个

Answer 2

只需将div.card选择器上的显示属性替换为display: block即可。您可以在this article上找到有关显示值的更多信息。 div.card的最终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: block;
}

更新小提琴：https://jsfiddle.net/j5L6m2ju/4/

我怎么能把我的卡堆叠在一起？

2 个答案: