Блог

Главная - Вопросы по программированию - Css «карточка» статья ниже на другую — не найти решение

Css «карточка» статья ниже на другую — не найти решение

#jquery #html #css #bootstrap-4

#jquery #HTML #css #bootstrap-4

Вопрос:

Во-первых, спасибо за ваше время 🙂

я хочу создать статью одну под другой, стиль css card. Но я не нахожу решения своей проблемы.

я пытался использовать z-index, абсолютное и относительное положение, очистить: оба и поплавок и т.д..

Но я не могу найти решение

Вот экран того, что я хочу сделать :

https://imagizer.imageshack.com/img924/5135/RkjGbs.jpg

Вот результат, который я также хочу получить:

https://demos.creative-tim.com/hipster-as-f-cards/presentation.html?_ga=2.266266695.990224034.1554927522-1333580824.1554927522amp;fbclid=IwAR3J0ZiT_HQ3G30UZEnfCCND74IvKWwcaF3MzyYQx6YZmmo5LPDVwpbsC8w

Я также проверил код, но он кажется мне сложным.

вот часть кода 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>

Я ожидаю, что моя карта будет ниже другой, как показано на картинке, которую я поместил. Я хочу повторить процесс для «карточек» другой статьи, как в ссылке, которую я привел в примере.Отзывчивый, похоже, теперь работает с этими несколькими картами, и я хочу адаптивное решение, если это возможно, и для других карт, если это возможно.

Заранее спасибо за вашу помощь

Комментарии:

1. Я вижу, что у этого вопроса есть jquery тег, но в примере jQuery не найден. Это что-то важное для создания функциональности, которую вы ищете?

Ответ №1:

Если вы хотите придерживаться 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 (не требуется начальной загрузки или других зависимостей) с использованием многостолбцового макета CSS — широко поддерживается в современных браузерах.

Также полезно: подходы к макету CSS Masonry

Комментарии:

1. Спасибо за быстроту и актуальность вашего ответа. Я попробую это 🙂 еще раз, спасибо

Метки: