TransWikia.com

Как скомпоновать таблички друг за другом без пространств и отступов? CSS

Stack Overflow на русском Asked by user387603 on November 30, 2021

На данной картинке я хочу показать проблему которую хочу решить:

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

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

body {
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.block_link {
  text-decoration: none;
  color: black;
  opacity: 0.75;
  transition: opacity .3s linear;
}

.block_link:hover {
  opacity: 1;
}

.block {
  margin: 25px 35px;
  width: 350px;
  min-height: 400px;
  background-color: white;
  box-shadow: 0 0 7px rgba(0, 0, 0, 0.2);
}

.content_photo {}

.content_image {
  display: block;
  max-width: 100%;
  height: auto;
}

.insert_content {
  padding: 20px;
}

.content_title {
  font-family: 'Oswald', sans-serif;
  font-weight: 550;
  font-size: 30px;
  margin-bottom: 10px;
  line-height: 1.1;
}

.content_text {
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
  font-size: 18px;
  margin-bottom: 10px;
}

.content_author {
  font-family: 'Oswald', sans-serif;
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 5px;
}

.content_author_date {
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
  font-size: 14px;
}
<a href="" class="block_link">
  <div class="block">
    <div class="content_photo">
      <img class="content_image" src="https://placehold.it/750x600" alt="">
    </div>
    <div class="insert_content">
      <div class="content_title">Заголовок данной статьи здесь</div>
      <div class="content_text">Сайт рыбатекст поможет дизайнеру, верстальщику, вебмастеру сгенерировать несколько абзацев более менее осмысленного текста рыбы на русском языке, а начинающему оратору отточить навык публичных выступлений в домашних условиях. При создании генератора
        мы использовали небезизвестный универсальный код речей. Текст генерируется абзацами случайным образом от двух до десяти предложений в абзаце, что позволяет сделать текст более привлекательным и живым для визуально-слухового восприятия.</div>
      <div class="content_author">Дядя Пушкин</div>
      <div class="content_author_date">21.07.20</div>
    </div>
  </div>
</a>
cssflexboxhtmlвёрстка

One Answer

Уберите отступы для:

.insert_content {
    padding: 0;
    // ... остальные стили
}

и/или

.block { 
    margin: 0; 
    // ... остальные стили
}

и посмотрите на результат. Если дело в них, то далее подстройте значения под Ваши потребности.

Я обнови свой ответ исходя из Ваших комментариев. Если Вы хотите сделать "плиточное" выравнивания с помощью Flex, то добавьте "обертку" и следующие свойства:

.column {
  flex: 50%;
  max-width: 50%;
}


body {
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
}

.column {
  flex: 50%;
  max-width: 50%;
}

.block_link {
  display: block;
  text-decoration: none;
  color: black;
  opacity: 0.75;
  transition: opacity .3s linear;
}

.block_link:hover {
  opacity: 1;
}

.block {
  margin: 0;
  background-color: white;
  box-shadow: 0 0 7px rgba(0, 0, 0, 0.2);
}

.content_image {
  display: block;
  max-width: 100%;
  height: auto;
}

.insert_content {
  padding: 20px;
}

.content_title {
  font-family: "Oswald", sans-serif;
  font-weight: 550;
  font-size: 30px;
  margin-bottom: 10px;
  line-height: 1.1;
}

.content_text {
  font-family: "Oswald", sans-serif;
  font-weight: 400;
  font-size: 18px;
  margin-bottom: 10px;
}

.content_author {
  font-family: "Oswald", sans-serif;
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 5px;
}

.content_author_date {
  font-family: "Oswald", sans-serif;
  font-weight: 400;
  font-size: 14px;
}
<div class="column">
  <a href="" class="block_link">
    <div class="block">
      <div class="content_photo">
        <img class="content_image" src="https://placehold.it/750x600" alt="">
      </div>
      <div class="insert_content">
        <div class="content_title">Заголовок данной статьи здесь</div>
        <div class="content_text">Сайт рыбатекст поможет дизайнеру, верстальщику, вебмастеру сгенерировать несколько абзацев более менее осмысленного. Сайт рыбатекст поможет дизайнеру, верстальщику, вебмастеру сгенерировать несколько абзацев более менее осмысленного.</div>
        <div class="content_author">Дядя Пушкин</div>
        <div class="content_author_date">21.07.20</div>
      </div>
    </div>
  </a>

  <a href="" class="block_link">
    <div class="block">
      <div class="content_photo">
        <img class="content_image" src="https://placehold.it/750x600" alt="">
      </div>
      <div class="insert_content">
        <div class="content_title">Заголовок данной статьи здесь</div>
        <div class="content_text">При создании генератора мы использовали небезизвестный универсальный код речей. Текст генерируется абзацами случайным образом от двух до десяти предложений в абзаце, что позволяет сделать текст более привлекательным и живым для визуально-слухового
          восприятия.</div>
        <div class="content_author">Дядя Пушкин</div>
        <div class="content_author_date">21.07.20</div>
      </div>
    </div>
  </a>

  <a href="" class="block_link">
    <div class="block">
      <div class="content_photo">
        <img class="content_image" src="https://placehold.it/750x600" alt="">
      </div>
      <div class="insert_content">
        <div class="content_title">Заголовок данной статьи здесь</div>
        <div class="content_text">Сайт рыбатекст поможет дизайнеру, верстальщику, вебмастеру сгенерировать несколько абзацев более менее осмысленного текста рыбы на русском языке, а начинающему оратору отточить навык публичных выступлений в домашних условиях. При создании генератора
        </div>
        <div class="content_author">Дядя Пушкин</div>
        <div class="content_author_date">21.07.20</div>
      </div>
    </div>
  </a>

  <a href="" class="block_link">
    <div class="block">
      <div class="content_photo">
        <img class="content_image" src="https://placehold.it/750x600" alt="">
      </div>
      <div class="insert_content">
        <div class="content_title">Заголовок данной статьи здесь</div>
        <div class="content_text">При создании генератора мы использовали небезизвестный универсальный код речей. Текст генерируется абзацами .</div>
        <div class="content_author">Дядя Пушкин</div>
        <div class="content_author_date">21.07.20</div>
      </div>
    </div>
  </a>
</div>
<div class="column">
  <a href="" class="block_link">
    <div class="block">
      <div class="content_photo">
        <img class="content_image" src="https://placehold.it/750x600" alt="">
      </div>
      <div class="insert_content">
        <div class="content_title">Заголовок данной статьи здесь</div>
        <div class="content_text">Сайт рыбатекст поможет дизайнеру, верстальщику, вебмастеру сгенерировать несколько абзацев более менее осмысленного.</div>
        <div class="content_author">Дядя Пушкин</div>
        <div class="content_author_date">21.07.20</div>
      </div>
    </div>
  </a>

  <a href="" class="block_link">
    <div class="block">
      <div class="content_photo">
        <img class="content_image" src="https://placehold.it/750x600" alt="">
      </div>
      <div class="insert_content">
        <div class="content_title">Заголовок данной статьи здесь</div>
        <div class="content_text">При создании генератора мы использовали небезизвестный универсальный код речей. Текст генерируется абзацами случайным образом от двух.</div>
        <div class="content_author">Дядя Пушкин</div>
        <div class="content_author_date">21.07.20</div>
      </div>
    </div>
  </a>

  <a href="" class="block_link">
    <div class="block">
      <div class="content_photo">
        <img class="content_image" src="https://placehold.it/750x600" alt="">
      </div>
      <div class="insert_content">
        <div class="content_title">Заголовок данной статьи здесь</div>
        <div class="content_text">Сайт рыбатекст поможет дизайнеру, верстальщику, вебмастеру сгенерировать несколько абзацев более менее осмысленного текста рыбы.
        </div>
        <div class="content_author">Дядя Пушкин</div>
        <div class="content_author_date">21.07.20</div>
      </div>
    </div>
  </a>

  <a href="" class="block_link">
    <div class="block">
      <div class="content_photo">
        <img class="content_image" src="https://placehold.it/750x600" alt="">
      </div>
      <div class="insert_content">
        <div class="content_title">Заголовок данной статьи здесь</div>
        <div class="content_text">При создании генератора мы использовали небезизвестный универсальный код речей. </div>
        <div class="content_author">Дядя Пушкин</div>
        <div class="content_author_date">21.07.20</div>
      </div>
    </div>
  </a>
</div>

Answered by Vasily on November 30, 2021

Add your own answers!

Ask a Question

Get help from others!

Recent Answers

Recent Questions

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP