Css "карточная" статья ниже на другую - не найти решение - PullRequest
Новая
       2

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

0 голосов
/ 18 апреля 2019

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

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

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

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

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

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.1554927522 & fbclid = IwAR3J0ZiT_HQ3G30UZEnfCCND74IvKwmox *1015* * * * * * * * * * *код, но он кажется мне сложным.

Вот часть соответствующего 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 Ответ

0 голосов
/ 18 апреля 2019

Если вы хотите придерживаться 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 Masonry Layout

Это решение предназначено только для CSS (не требуется Bootstrap или другие зависимости) с использованием Многостолбцовой макет CSS - поддерживается в современных браузерах .

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...