首先感谢您的宝贵时间:)
我想创建一篇文章在另一篇文章下面，卡片的 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 中得到广泛支持.
关于jquery - Css "card"下面的文章到另一篇 - 找不到解决方法，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55737161/