jquery - 下面的CSS“卡片”文章到另一篇 - 找不到解决方案
问题描述
首先感谢您的时间:)
我想在另一个下面创建文章,卡片的 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 多列布局的纯 CSS解决方案(不需要 Bootstrap 或其他依赖项) -在现代浏览器中得到广泛支持。
推荐阅读
- gcc - FindOpenMP 在 alpine 上设置 OpenMP_pthread_LIBRARY 失败
- presto - 如何在 presto sql 中取消嵌套 varchar 数组
- c# - 可以使用隐式转换来满足超类型参数吗?
- google-chrome - Chrome 扩展:未经检查的 runtime.lastError:无法解析或设置名为“ASP.NET_SessionId”的 cookie
- python - 如何从 MATLAB 深度学习模型转换为 Keras 代码
- patch - 如何解决错误“Hunk #2 FAILED at 456. 1 out of 2 hunks FAILED”
- machine-learning - 具有不平衡数据的文本分类
- android - 在 Android 中更新 LiveData 的最佳方式是什么?
- python-3.x - AttributeError: 'LifoQueue' 对象没有属性 'put' selenium webdriver
- sql - 使用 1 行数据创建最多 3 行输出 SQL