Как компоновать таблички друг за другом без пространства отступов
Основной скелет для табличек
<!DOCTYPE html>
<html>
<head>
<title>Blockout</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<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>
Основные стили Css для табличек
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;][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;
}
[На данной картинке я хочу описать проблему которую хочу решить. Как сделать так, чтобы таблички не равнялись на самую длинную табличку а компоновались боле сплоченно и сгруппировано без пространства ][1]
[1]: https://i.stack.imgur.com/5wlAG.png
Ответы (1 шт):
Автор решения: Vasily
→ Ссылка
Уберите отступы для:
.insert_content {
padding: 0;
// ... остальные стили
}
и/или
.block {
margin: 0;
// ... остальные стили
}
и посмотрите на результат. Если дело в них, то далее подстройте значения под Ваши потребности.
Если Вы хотите убрать пустые места под блоками которые короче, то:
.block-link {
display: inline-block;
// ... остальные стили
}
Так же обратите внимание что у Вас задан min-height со значением 400px для элемента(ов) с именем класса .block, а в body используется flex.
Что может напрямую влиять на предложенные мною решения.
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: 0;
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;][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>
<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>