БЛОГ НА HUSL


Не могу понять, почему разъезжаются блоки

Автор вопроса: Амин

Делаю страницу блога, и там есть карточки, мне надо чтобы карточки шли в 2 колонки. Сначала все нормально встраивается, но потом блоки начинают разъезжаться. Мне надо чтобы они друг относительно друга ровно стояли в одном ряду. Как быть, не пойму в чем проблема... введите сюда описание изображения

* {
  box-sizing: border-box;
}

a {
  text-decoration: none;
}

.container {
  padding-left: 5%;
  vertical-align: baseline;
}

.card {
  display: inline-block;
  width: 45%;
  height: 650px;
  border: black;
  background-color: rgb(241, 252, 230);
  border-radius: 40px;
  padding: 40px;
  margin: 20px;
}

.card:hover {
  box-shadow: 0 0 30px rgba(59, 47, 61, 0.5);
  transition: 300ms;
}

.blog_a {
  text-align: center;
  text-decoration: none;
  color: rgb(112, 27, 38);
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 35px;
  margin-bottom: 0;
}

.blog_desc {
  text-align: center;
  color: rgb(56, 43, 94);
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  text-decoration: none;
}

.blog_date {
  text-align: center;
  font-family: 'Inconsolata', monospace;
  font-weight: 700;
  font-size: 20px;
  color: rgb(133, 73, 66);
  margin-top: 8px;
  text-decoration: none;
  margin-bottom: 30px;
}

.count {
  text-align: center;
  color: rgb(133, 73, 66);
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 35px;
  margin-top: 6%;
  margin-bottom: 5%;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/static/projects/style.css">
  <link rel="stylesheet" href="/static/blog/blog.css">
  <link rel="stylesheet" href="/static/blog/detail.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@700&family=Poppins:wght@300;400&family=Roboto+Mono:wght@400;500&display=swap" rel="stylesheet">
  <title>kipkeev2.0</title>
</head>

<body>
  <nav>
    <span class="logo_text">kipkeev 2.0</span>
    <div class="links">
      <a class="inst" href="https://instagram.com">Instagram</a>
      <a class="resume" href="/static/projects/resume.pdf">Resume</a>
      <a class="blog_btn" href="/blog/">
        <div class="btndiv">Blog</div>
      </a>
    </div>
  </nav>

  <h1 class="count"><b>8 Blogs here</b></h1>
  <div class="container">

    <div class="card">
      <div class="blog_a">
        <h2>Lorem ipsum</h2>
      </div>
      <div class="blog_date">
        <h5>-- 18 JUL 2021 --</h5>
      </div>
      <div class="blog_desc">
        <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Non quam lacus suspendisse faucibus interdum posuere lorem. Elementum facilisis leo vel fringilla. Diam maecenas ultricies
          mi eget mauris. Proin nibh nisl condimentum id. Venenatis tellus in metus vulputate eu scelerisque. Proin fermentum leo vel orci. Lectus magna fringilla urna porttitor. Volutpat lacus laoreet non curabitur gravida arcu ac tortor. Est ullamcorper
          eget nulla facilisi etiam dignissim diam. Neque vitae tempus quam pellentesque. Vulputate ut pharetra sit …</h3>
      </div>

    </div>

    <div class="card">
      <div class="blog_a">
        <h2>ALan</h2>
      </div>
      <div class="blog_date">
        <h5>-- 18 JUL 2021 --</h5>
      </div>
      <div class="blog_desc">
        <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Non quam lacus suspendisse faucibus interdum posuere lorem. Elementum facilisis leo vel fringilla. Diam maecenas ultricies
          mi eget mauris. Proin nibh nisl condimentum id. Venenatis tellus in metus vulputate eu scelerisque. Proin fermentum leo vel orci. Lectus magna fringilla urna porttitor. Volutpat lacus laoreet non curabitur gravida arcu ac tortor. Est ullamcorper
          eget nulla facilisi etiam dignissim diam. Neque vitae tempus quam pellentesque. Vulputate ut pharetra sit …</h3>
      </div>

    </div>

    <div class="card">
      <div class="blog_a">
        <h2>uusuushususu</h2>
      </div>
      <div class="blog_date">
        <h5>-- 19 JUL 2021 --</h5>
      </div>
      <div class="blog_desc">
        <h3>bwbbwbwbwbwbwbbwbw</h3>
      </div>

    </div>

    <div class="card">
      <div class="blog_a">
        <h2>fjjfjfjf</h2>
      </div>
      <div class="blog_date">
        <h5>-- 19 JUL 2021 --</h5>
      </div>
      <div class="blog_desc">
        <h3>fkkfkkfkfk</h3>
      </div>

    </div>

    <div class="card">
      <div class="blog_a">
        <h2>jdjjd</h2>
      </div>
      <div class="blog_date">
        <h5>-- 19 JUL 2021 --</h5>
      </div>
      <div class="blog_desc">
        <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Non quam lacus suspendisse faucibus interdum posuere lorem. Elementum facilisis leo vel fringilla. Diam maecenas ultricies
          mi eget mauris. Proin nibh nisl condimentum id. Venenatis tellus in metus vulputate eu scelerisque. Proin fermentum leo vel orci. Lectus magna fringilla urna porttitor. Volutpat lacus laoreet non curabitur gravida arcu ac tortor. Est ullamcorper
          eget nulla facilisi etiam dignissim diam. Neque vitae tempus quam pellentesque. Vulputate ut pharetra sit …</h3>
      </div>

    </div>

    <div class="card">
      <div class="blog_a">
        <h2>ffhhf</h2>
      </div>
      <div class="blog_date">
        <h5>-- 19 JUL 2021 --</h5>
      </div>
      <div class="blog_desc">
        <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Non quam lacus suspendisse faucibus interdum posuere lorem. Elementum facilisis leo vel fringilla. Diam maecenas ultricies
          mi eget mauris. Proin nibh nisl condimentum id. Venena</h3>
      </div>

    </div>

    <div class="card">
      <div class="blog_a">
        <h2>fjfj</h2>
      </div>
      <div class="blog_date">
        <h5>-- 19 JUL 2021 --</h5>
      </div>
      <div class="blog_desc">
        <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Non quam lacus suspendisse faucibus interdum posuere lorem. Elementum facilisis leo vel fringilla. Diam maecenas ultricies
          mi eget mauris. Proin nibh nisl condimentum id. Venenatis tellus in metus vulputate eu scelerisque. Proin fermentum leo vel orci. Lectus magna fringilla urna porttitor. Volutpat lacus laoreet non curabitur gravida arcu ac tortor. Est ullamcorper
          eget nulla facilisi etiam dignissim diam. Neque vitae tempus quam pellentesque. Vulputate ut pharetra sit …</h3>
      </div>

    </div>

    <div class="card">
      <div class="blog_a">
        <h2>sj</h2>
      </div>
      <div class="blog_date">
        <h5>-- 19 JUL 2021 --</h5>
      </div>
      <div class="blog_desc">
        <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Non quam lacus suspendisse faucibus interdum posuere lorem. Elementum facilisis leo vel fringilla. Diam maecenas ultricies
          mi eget mauris. Proin nibh nisl condimentum id. Venenatis tellus in metus vulputate eu scelerisque. Proin fermentum leo vel orci. Lectus magna fringilla urna porttitor. Volutpat lacus laoreet non curabitur gravida arcu ac tortor. Est ullamcorper
          eget nulla facilisi etiam d</h3>
      </div>

    </div>

  </div>

</body>

</html>


Источник

Ответы (2 шт):

Автор решения: Voojinful

введите сюда описание изображения


    .container {
      padding-left: 5%;
      vertical-align: baseline;
      display: grid;
      grid-template-columns: 1fr 1fr;
    }

сделать контейнер гридом.

и убрал ширину на .card

→ Ссылка
Автор решения: Андрей Миронов

Скорее всего это происходит из-за-того, что у вас жёстко задана высота, и текст вылезает из блока. Можно добавить свойство overflow, но тогда текст будет обрезаться.

.card {
    overflow: hidden;
}
→ Ссылка

licensed under cc by-sa 3.0 with attribution.