Как выровнять в один ряд два блока

Question

Нужно выровнять два вот таких блока в один ряд

html:

<div class="news">
{% for news in news_list %}
<div class="col-md-6">
  <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
    <div class="col p-4 d-flex flex-column position-static">
      <h3 class="mb-0">{{ news.title }}</h3>
      <div class="mb-1 text-body-secondary time-up-and-cr">{{ news.created_at }} {% if news.updated_at != news.created_at %} оновлення: {{ news.updated_at }}{% endif %}</div>
      <p class="card-text mb-auto">{{ news.description }}</p>
      <a href="#" class="icon-link gap-1 icon-link-hover stretched-link">
        Continue reading
      </a>
    </div>
    <div class="col-auto d-none d-lg-block">
      <svg class="bd-placeholder-img" width="200" height="250" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"></rect><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
    </div>
  </div>
</div>
{% endfor %}
</div>

css:

body{
margin-left: 20px;

.news{
    vertical-align: top;
}
.time-up-and-cr{
    font-size: 10px
}
header{
    background-color: yellow;
    margin-left: -20px;
}
footer{
    background-color: yellow;
    margin-left: -20px;
}
.welcome-to{
    text-align: center;
    margin-left: -20px;
}

}

Answer 1

Насколько вижу вы используете библиотеку bootstrap. Основные проблемы:

Несоответствие классов col и col-auto: Внутри блока с классом .row используйте классы col и col-auto правильно. Например, в вашем случае можно использовать col-md-8 для текстового содержимого и col-md-4 для изображения, чтобы оба столбца имели одинаковую высоту и были выровнены.
Использование d-flex и flex-md-row: Вы используете классы d-flex и flex-md-row, которые управляют выравниванием по горизонтали. Убедитесь, что эти классы не конфликтуют с другими классами, управляющими высотой или шириной блоков.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="row">
  <div class="col-md-6">
    <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
      <div class="col-md-8 p-4 d-flex flex-column position-static">
        <h3 class="mb-0">{{ news.title }}</h3>
        <div class="mb-1 text-body-secondary">{{ news.created_at }} {% if news.updated_at != news.created_at %} оновлення: {{ news.updated_at }}{% endif %}</div>
        <p class="mb-auto">{{ news.description }}</p>
        <a href="#" class="stretched-link">Continue reading</a>
      </div>
      <div class="col-md-4 d-none d-lg-block">
        <svg class="bd-placeholder-img" width="200" height="250" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false">
          <title>Placeholder</title>
          <rect width="100%" height="100%" fill="#55595c"></rect><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text>
        </svg>
      </div>
    </div>
  </div>
  
  <div class="col-md-6">
    <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
      <div class="col-md-8 p-4 d-flex flex-column position-static">
        <h3 class="mb-0">{{ news.title }}</h3>
        <div class="mb-1 text-body-secondary">{{ news.created_at }} {% if news.updated_at != news.created_at %} оновлення: {{ news.updated_at }}{% endif %}</div>
        <p class="mb-auto">{{ news.description }}</p>
        <a href="#" class="stretched-link">Continue reading</a>
      </div>
      <div class="col-md-4 d-none d-lg-block">
        <svg class="bd-placeholder-img" width="200" height="250" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false">
          <title>Placeholder</title>
          <rect width="100%" height="100%" fill="#55595c"></rect><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text>
        </svg>
      </div>
    </div>
  </div>
</div>

БЛОГ НА HUSL

Как выровнять в один ряд два блока

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