How to make the lines all equal in height? - html

Question

I've noticed that the lines are equal in height, I tried to add height: 100% in some specific containers but nothing happened. Any ideas would be appreciated.~
The first image is the expected output with equal lines below.
[![It should be like this][1]][1]
[![This is my output][2]][2]
This is my output. The lines are not equal below. I marked it with dots.
This is my codes in scss
.content {
position: relative;
#include max-width;
&__image {
width: 100%;
height: 202px;
object-fit: cover;
object-position: center;
border: 5px solid white;
#include sp {
width: 85.38%;
height: auto;
}
&--small {
border: 4px solid white;
height: 147px;
#include sp {
top: -10px;
width: 33.29%;
height: auto;
}
}
}
&__item {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
width: 378px;
color: black;
margin: 0;
#include sp {
width: 100%;
height: auto;
}
&--small {
width: 278px;
#include sp {
flex-direction: row;
align-items: flex-start;
width: 100%;
}
}
&:not(:last-child) {
margin-bottom: 31px;
#include sp {
margin-bottom: getsp375(40px);
}
}
&:not(:nth-child(3n+3)) {
margin-right: 35px;
#include sp {
margin-right: 0;
}
}
}
&__item-container {
width: 1220px;
display: flex;
flex-wrap: wrap;
margin-top: 27px;
height: 100%;
#include sp {
width: 100%;
margin-top: getsp375(42px);
height: auto;
justify-content: center;
}
&--small {
width: 907px;
#include sp {
width: 100%;
}
}
}
&__date {
position: absolute;
margin-top: 5px;
left: -5px;
top: 38px;
height: 28px;
white-space: nowrap;
transform: rotate(-90deg);
#include sp {
margin-top: 0;
left: getsp375(-45px);
top: getsp375(90px);
}
&--small {
left: -10px;
#include sp {
left: 0;
top: getsp375(27px);
}
}
}
&__date-text {
font-size: 12px;
#include sp {
font-size: getsp375(18px);
}
}
&__wrapper {
position: relative;
display: flex;
justify-content: center;
width: 100%;
padding-top: 8px;
padding-left: 50px;
#include sp {
display: block;
padding-top: 0;
padding-left: getsp375(20px);
width: 92%;
height: auto;
}
}
&__category-wrapper {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
&--small {
#include sp {
margin-left: getsp375(15px);
margin-right: getsp375(30px);
}
}
}
&__category-line {
border-left: 1px solid $border;
margin-left: 6px;
margin-top: 15px;
padding-bottom: 5px;
padding-right: 8px;
#include sp {
margin-left: getsp375(18px);
margin-top: getsp375(32px);
padding-bottom: getsp375(19px);
padding-right: 0;
width: 100%;
max-width: 100%;
}
&--small {
margin-left: -5px;
#include sp {
margin-left: getsp375(50px);
margin-top: getsp375(1px);
padding-bottom: getsp375(40px);
}
}
}
&__category-text {
font-size: 16px;
letter-spacing: 0.1em;
padding-left: 19px;
width: 338px;
max-width: 100%;
#include sp {
font-size: getsp375(26px);
padding-left: getsp375(15px);
width: 100%;
max-width: 100%;
}
&--small {
width: 234px;
padding-left: 14px;
#include sp {
position: absolute;
width: 100%;
top: -4px;
}
}
&--sidepanel {
width: 100%;
padding-left: 0;
line-height: 2.25em;
}
&::before {
content: ' \25A0';
padding-right: getsp375(14px);
cursor: pointer;
#include sp {
padding-right: getsp375(10px);
}
}
&--skyblue {
color: $skyblue;
}
&--islamicgreen {
color: $islamicgreen;
}
&--tawny {
color: $tawny;
}
&--purple {
color: $purple;
}
&--amaranth {
color: $amaranth;
}
}
&__title-line {
border-top: 1px solid $border;
border-left: 1px solid $border;
margin-left: 6px;
padding-right: 8px;
padding-bottom: 21px;
#include sp {
margin-left: getsp375(18px);
padding-right: getsp375(8px);
padding-bottom: getsp375(21px);
width: 100%;
max-width: 100%;
}
&--small {
margin-left: -13px;
padding-bottom: 5px;
padding-right: 0;
#include sp {
margin-left: getsp375(50px);
padding-bottom: getsp375(20px);
}
}
}
&__title {
padding-top: 21px;
padding-left: 22px;
font-size: 24px;
font-family: $mincho;
font-weight: $medium;
line-height: 1.5em;
width: 338px;
max-width: 100%;
#include sp {
padding-left: getsp375(21px);
padding-top: getsp375(17px);
font-size: getsp375(36px);
width: 100%;
}
&--small {
padding-top: 13px;
padding-left: 15px;
padding-right: 8px;
font-size: 18px;
line-height: 1.44em;
width: 234px;
#include sp {
padding-top: getsp375(19px);
padding-left: getsp375(21px);
font-size: getsp375(32px);
line-height: 1.5em;
padding-right: 0;
width: 100%;
}
}
&--sidepanel {
font-size: 18px;
line-height: 1.5em;
padding-top: 0;
padding-left: 0;
width: 100%;
#include sp {
font-size: getsp375(27px);
}
}
}
}
This is my codes in pug
div.content
//- SECTION - PICKUP
section.pickup
div.container__content
div.title
div.title__lines
h1.title__text PICKUP
div.content__item-container
a.content__item(href="#")
img.content__image(src="./img/pickup__img1.jpg", alt="pickup1")
div.content__wrapper
div.content__date
p.content__date-text 22 Jun, 2020
div.content__category-wrapper
div.content__category-line
p.content__category-text.content__category-text--skyblue 講習会
div.content__title-line
p.content__title リアルをコアとした体験をデザインし、情報拡散や態度変容などの効果を検証
a.content__item(href="#")
img.content__image(src="./img/pickup__img2.jpg", alt="pickup2")
div.content__wrapper
div.content__date
p.content__date-text 22 Jun, 2020
div.content__category-wrapper
div.content__category-line
p.content__category-text.content__category-text--islamicgreen イベント
div.content__title-line
p.content__title リアルをコアとした体験をデザインし、情報拡散や態度
a.content__item(href="#")
img.content__image(src="./img/pickup__img3.jpg", alt="pickup3")
div.content__wrapper
div.content__date
p.content__date-text 22 Jun, 2020
div.content__category-wrapper
div.content__category-line
p.content__category-text.content__category-text--tawny お知らせ
div.content__title-line
p.content__title リアルをコアとした体験をデザインし、情報拡散や態度変容などの効果を検証リアル...を

Answer 1

It was too difficult to debug your code so I created a new "card" structure.
EDIT: I was able to get your code to work by adding height: 100%; to the &__title-line and &__wrapper selectors while also adjusting the width and margins of the "columns" to use % values instead of fixed values.
Fixing Existing Structure
Check out the codepen and the difference between the css.
Alternate New Structure
.card
img(src="https://via.placeholder.com/300x150")
.card__body
.card__left
| 22 Jun, 2020
.card__right
.card__category.card__category--green
| ■ イベント
.card__content
| リアルをコアとした体験をデザインし、情報拡散や態度
And then the following "card" scss
.card {
display: flex;
flex-direction: column;
flex-shrink: 0;
padding: 10px;
width: 33.3%;
img {
border: 5px solid #fff;
margin-bottom: 15px;
max-width: 100%;
}
&__body {
display: flex;
height: 100%;
}
&__left {
font-size: 10px;
padding-right: 5px;
text-align: right;
writing-mode: sideways-lr;
}
&__right {
border-left: 1px solid #000;
width: 100%;
}
&__category {
border-bottom: 1px solid #000;
font-size: 12px;
padding: 0 0 5px 10px;
&--green {
color: #1b9d00;
}
&--blue {
color: #467bde;
}
&--orange {
color: #b67606;
}
}
&__content {
padding: 10px 0 10px 10px;
}
}
Run the example below to check it out.
* {
box-sizing: border-box;
}
body {
background-color: #f1f1f1;
margin: 0;
}
.row {
display: flex;
}
.card {
display: flex;
flex-direction: column;
flex-shrink: 0;
padding: 10px;
width: 33.3%;
}
img {
border: 5px solid #fff;
margin-bottom: 15px;
max-width: 100%;
}
.card__body {
display: flex;
height: 100%;
}
.card__left {
font-size: 10px;
padding-right: 5px;
text-align: right;
writing-mode: sideways-lr;
}
.card__right {
border-left: 1px solid #000;
width: 100%;
}
.card__category {
border-bottom: 1px solid #000;
font-size: 12px;
padding: 0 0 5px 10px;
}
.card__category--blue {
color: #467bde;
}
.card__category--green {
color: #1b9d00;
}
.card__category--orange {
color: #b67606;
}
.card__content {
padding: 10px 0 10px 10px;
}
<div class="row">
<div class="card">
<img src="https://via.placeholder.com/300x150">
<div class="card__body">
<div class="card__left">
22 Jun, 2020
</div>
<div class="card__right">
<div class="card__category card__category--blue">
■ 講習会
</div>
<div class="card__content">
リアルをコアとした体験をデザインし、情報拡散や態度変容などの効果を検証
</div>
</div>
</div>
</div>
<div class="card">
<img src="https://via.placeholder.com/300x150">
<div class="card__body">
<div class="card__left">
22 Jun, 2020
</div>
<div class="card__right">
<div class="card__category card__category--green">
■ イベント
</div>
<div class="card__content">
リアルをコアとした体験をデザインし、情報拡散や態度
</div>
</div>
</div>
</div>
<div class="card">
<img src="https://via.placeholder.com/300x150">
<div class="card__body">
<div class="card__left">
22 Jun, 2020
</div>
<div class="card__right">
<div class="card__category card__category--orange">
■ お知らせ
</div>
<div class="card__content">
リアルをコアとした体験をデザインし、情報拡散や態度変容などの効果を検証リアル...を
</div>
</div>
</div>
</div>
</div>