首先感谢你的时间:)
我想创建一个低于另一个的文章，卡的css样式。但我找不到解决问题的办法。
我试图使用z-index，绝对和相对位置，clear：both和float等。
但我找不到解决方案
这是我想要做的屏幕：
https://imagizer.imageshack.com/img924/5135/RkjGbs.jpg
这里我想得到的结果：
我也检查了代码，但对我来说似乎很复杂。
这是有关的html / CSS代码的一部分：
/* font-family: 'Playfair Display', serif; */
@import url('https://fonts.googleapis.com/css?family=Kaushan+Script');
@import url('https://fonts.googleapis.com/css?family=Playfair+Display');
@import url('https://fonts.googleapis.com/css?family=Playfair+Display|Raleway');
body, html {
padding: 0;
margin: 0;
}
a {
text-decoration: none;
}
.container-fluid {
padding: 0;
}
a:hover {text-decoration: none}
.haute {
background-color: #000000;
height: 10vw;
}
.logo {
float: left;
height: 9vw;
width: 9vw;
}
.logo-title {
margin-left: 5vw;
}
.title {
float: left;
color: white;
margin-top: 5vw;
font-size: 1.5vw;
font-family: 'Kaushan Script', cursive;
}
.navigation a{
display: inline;
float: right;
margin-left: 1vw;
font-size: 1.5vw;
margin-top: 5vw;
color: white;
font-family: 'Kaushan Script', cursive;
}
.navigation-div {
margin-right : 5vw;
}
/* carousel */
.carousel {
height: 20vw;
}
.carousel-item {
height: 20vw;
}
/* end carousel */
/* structure */
.suite {
margin-top: 2vw;
}
.aside {
background-color: blue;
height: 50vw;
}
.portfolio {
background-color: black;
height: 50vw;
}
.footer {
background-color: #D3D3D3;
height: 10vw;
}
/* Portfolio */
.row-margin {
margin-right: 9vw;
margin-left: 9vw;
}
/* Le contenu des cartes */
/* artcile card */
.citation-card {
height: 20vw;
width: 20vw;
margin-left: auto;
margin-right: auto;
margin-top: 2vw;
display: block;
}
.citation-img {
height: 20vw;
width: 20vw;
border-radius: 0.5vw;
box-shadow : 0.2vw 0.2vw 0.2vw 0.2vw rgba(0, 0, 0, 0.2);
}
.article-card {
height: 35vw;
width: 20vw;
background-color: white;
border-radius: 0 0 0.5vw 0.5vw;
margin-top: 2vw;
overflow: hidden;
box-shadow : 0.2vw 0.2vw 0.2vw 0.2vw rgba(0, 0, 0, 0.2);
margin-left: auto;
margin-right: auto;
display: block;
}
.article-card h2 {
font-family: 'Kaushan Script', cursive;
text-align: center;
font-size: 3vw;
color: black;
}
.article-card h3 {
margin-top: 1vw;
margin-left: 1vw;
text-align: left;
color: #798081;
font-size: 1.5vw;
}
.article-card p {
text-align: center;
font-size: 1.5vw;
color: black;
font-family: 'Raleway', sans-serif;
color: #798081;
}
.article-card-img {
height: 15vw;
width: 20vw;
border-radius: 0.5vw 0.5vw 0 0 ;
}
/* article sound card */
.article-card-sound {
height: 40vw;
width: 20vw;
border-radius: 0.5vw 0.5vw 0 0 ;
}
.article-card-sound-div {
height: 40vw;
width: 20vw;
margin-top: 2vw;
overflow: hidden;
box-shadow : 0.2vw 0.2vw 0.2vw 0.2vw rgba(0, 0, 0, 0.2);
margin-left: auto;
margin-right: auto;
display: block;
border-radius: 0.5vw 0.5vw 0.5vw 0.5vw ;
position: relative;
}
.article-card-sound-div h2 {
position : absolute;
color: #000010;
font-family: 'Kaushan Script', cursive;
font-size: 3.5vw;
text-align: center;
line-height: 3.5vw;
}
.play-icon {
position : absolute;
margin-top: 30vw;
color: white;
margin-left: 5vw;
text-shadow: 0.2vw 0.2vw 0.2vw 0.2vw #ffffff;
}
.play-icon:hover {
color: #A9A9A9;
}
.audio-player {
width: 20vw;
position : absolute;
margin-top: 37vw;
}
/* just article card */
.article-card-just-article {
height: 17vw;
width: 20vw;
background-color: white;
border-radius: 0 0 0.5vw 0.5vw;
margin-top: 2vw;
overflow: hidden;
box-shadow : 0.2vw 0.2vw 0.2vw 0.2vw rgba(0, 0, 0, 0.2);
margin-left: auto;
margin-right: auto;
display: block;
}
.article-card-just-article h2 {
font-family: 'Kaushan Script', cursive;
text-align: center;
font-size: 3vw;
color: black;
}
.article-card-just-article h3 {
margin-top: 1vw;
margin-left: 1vw;
text-align: left;
color: #798081;
font-size: 1.5vw;
}
.article-card-just-article p {
text-align: center;
font-size: 1.5vw;
color: black;
font-family: 'Raleway', sans-serif;
color: #798081;
/* footer */
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid suite">
<div class="row row-margin">
<div class="col-xs-6 col-sm-4 col-lg-4 col-md-4">
<div class="citation-card">
<img class="citation-img" src="img/citation-11.png" alt="">
</div>
</div>
<div class="col-xs-6 col-sm-4 col-lg-4 col-md-4">
<div class="article-card">
<img class="article-card-img" src="img/4.jpg" alt="">
<h3> News </h3>
<h2> Titre article </h2>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor </p>
</div>
</div>
<div class="col-xs-6 col-sm-4 col-lg-4 col-md-4">
<div class="article-card-sound-div">
<h2> Votre méditation guidées matinale </h2>
<i class="far fa-play-circle fa-5x play-icon "></i>
<img class="article-card-sound" src="img/meditation.jpg" alt="">
</div>
</div>
<div class="col-xs-6 col-sm-4 col-lg-4 col-md-4">
<div class="article-card-just-article">
<h3> News </h3>
<h2> Titre article </h2>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor </p>
</div>
</div>
</div>
</div>我希望我的卡片能够低于另一张卡片，如图所示。我想重复另一篇文章的“卡片”的过程，就像我在示例中的链接一样。响应似乎现在可以使用这些卡片，如果可能的话，如果可能的话，我想要其他卡片的响应式解决方案。
在此先感谢您的帮助
如果你想坚持使用Bootstrap，你可以这样做： https://codepen.io/artursden/pen/dRWeBw
基本上，你只需要重新组织你的html，只使用3个col- *元素并将每列的所有卡片放入其中：
<div class="col-md-6 col-lg-4 masonry-column">
[all cards for the first column go here]
</div>
<div class="col-md-6 col-lg-4 masonry-column">
[all cards for the second column go here]
</div>
<div class="col-md-6 col-lg-4 masonry-column">
[all cards for the third column go here]
</div>
这种方法的问题在于，对于某些屏幕尺寸，它可能看起来很尴尬（如果您定义3列，对于某些尺寸，需要50％的宽度，另一列将显示在下面）。
另一种方法是仅定义2列但是，我相信以下是更好的方法（仅限CSS）：
这是一个仅使用CSS的解决方案（不需要Bootstrap或其他依赖项），使用CSS Multi-column Layout广泛支持的modern browsers。