Как реализовать CSS-столбцы Materialise для CSS с картами, расположенными горизонтально, а не вертикально - PullRequest
Новая
       6

Как реализовать CSS-столбцы Materialise для CSS с картами, расположенными горизонтально, а не вертикально

0 голосов
/ 29 июня 2018

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

Я пытаюсь получить данные из базы данных (данные будут упорядочены по дате) и хочу отображать последние сообщения в верхней строке, а не в первом столбце

любая помощь будет оценена 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
</head>
<style> 
.cards-container {
  column-break-inside: avoid;
}
.cards-container .card {
  display: inline-block;
  overflow: visible;
}
@media only screen and (min-width: 993px) {
  .cards-container {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
  }
}
</style>
<body>
  <div class="container">
    <div class="row">
          <div class="col s12 cards-container">
        <div class="card">
          <div class="card-image">
            <img src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
            <span class="card-title">Card Title</span>
            <a class="btn-floating halfway-fab waves-effect waves-light red"><i class="material-icons">add</i></a>
          </div>
          <div class="card-content">
            <p>Test Card 1</p>
            <br>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nisi, laborum corporis. Atque ducimus qui, suscipit eum impedit dolorum, architecto natus minima sapiente sunt veritatis itaque ad dolore. Et, ipsum sequi!</p>
          </div>
        </div>
        <div class="card">
          <div class="card-image">
            <img src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
            <span class="card-title">Card Title</span>
            <a class="btn-floating halfway-fab waves-effect waves-light red"><i class="material-icons">add</i></a>
          </div>
          <div class="card-content">
              <p>Test Card 2</p>
              <br>
              <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nisi, laborum corporis. Atque ducimus qui, suscipit eum impedit dolorum, architecto natus minima sapiente sunt veritatis itaque ad dolore. Et, ipsum sequi!</p>
          </div>
        </div>
        <div class="card">
          <div class="card-image">
            <img src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
            <span class="card-title">Card Title</span>
            <a class="btn-floating halfway-fab waves-effect waves-light red"><i class="material-icons">add</i></a>
          </div>
          <div class="card-content">
              <p>Test Card 3</p>
              <br>
              <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nisi, laborum corporis. Atque ducimus qui, suscipit eum impedit dolorum, architecto natus minima sapiente sunt veritatis itaque ad dolore. Et, ipsum sequi! Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla rerum ea, magni repellat corporis ab voluptates cumque aut quisquam exercitationem obcaecati itaque voluptatem, laborum saepe, eveniet eos doloremque atque! Cum.</p>
          </div>
        </div>
        <div class="card">
          <div class="card-image">
            <img src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
            <span class="card-title">Card Title</span>
            <a class="btn-floating halfway-fab waves-effect waves-light red"><i class="material-icons">add</i></a>
          </div>
          <div class="card-content">
              <p>Test Card 4</p>
              <br>
              <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nisi, laborum corporis. Atque ducimus qui, suscipit eum impedit dolorum, architecto natus minima sapiente sunt veritatis itaque ad dolore. Et, ipsum sequi!</p>
          </div>
        </div>
        <div class="card">
          <div class="card-image">
            <img src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
            <span class="card-title">Card Title</span>
            <a class="btn-floating halfway-fab waves-effect waves-light red"><i class="material-icons">add</i></a>
          </div>
          <div class="card-content">
              <p>Test Card 5</p>
              <br>
              <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nisi, laborum corporis. Atque ducimus qui, suscipit eum impedit dolorum, architecto natus minima sapiente sunt veritatis itaque ad dolore. Et, ipsum sequi!</p>
          </div>
        </div>
        <div class="card">
            <div class="card-image">
              <img src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
              <span class="card-title">Card Title</span>
              <a class="btn-floating halfway-fab waves-effect waves-light red"><i class="material-icons">add</i></a>
            </div>
            <div class="card-content">
                <p>Test Card 6</p>
                <br>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nisi, laborum corporis. Atque ducimus qui, suscipit eum impedit dolorum, architecto natus minima sapiente sunt veritatis itaque ad dolore. Et, ipsum sequi! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Commodi deleniti sequi placeat ab molestias laborum error provident enim pariatur animi quos harum laudantium rerum veniam quisquam, eius nostrum molestiae facilis!</p>
            </div>
          </div>
    </div>  
  </div>
</body>
</html>
...