Блог

Я создаю веб-сайт для резюме. Я добавляю содержимое в Job.js компонент и сталкиваюсь с проблемой с логотипом. Кажется, что высота увеличивается, когда desc превышает высоту компонента.Если desc короткий, у меня нет этой проблемы. У меня также не возникает этой проблемы, когда flex-direction является столбцом.

Я попытался настроить padding-bottom of .job-container img , но, хотя изображение вернулось к нормальному состоянию, внизу появилось нежелательное заполнение.

Соответствующий код

Job.js

 import React from 'react';

import '../css/Job.css';

function Job(props) {
  console.log(props.name);
  const jobList = props.job.map(j =>
    <div className='job-container'>
      <img src={j.logo} alt={j.alt} />
      <div className='description'>
        <div>
          <a href={j.link} rel='noopener noreferrer' target='_blank'>
            {j.companyName}
          </a>
        </div>
        <div>{j.title}</div>
        <div>{j.duration}</div>
        <div>{j.location}</div>
        <div>{j.desc.map(paragraph => <p>{paragraph}</p>)}</div>
      </div>
    </div>
  )

  return (
    <div>{jobList}</div>
  );
}

export default Job;
  

Job.css

 :root {
    --image-spacing: 30px;
}

.job-container {
    border: 2px solid red;
    padding: 0px 5%;
    display: flex;
    flex-direction: row;
}

.job-container img {
    border: 2px solid red;
    border-radius: 3px;
    display: block;
    height: auto;
    width: 35%;
}

.job-container .description {
    line-height: 1.45;
    padding-left: var(--image-spacing); /* Change this. */
}

.job-container a {
    color: black;
    text-decoration: none;
}

/* Responsive Mode */

@media only screen and (max-width: 768px) {
    .job-container {
        /* Line up description and image. */
        flex-direction: column;
    }

    .job-container img {
        border-radius: 3px;
        margin: auto;
        width: 75%;
    }

    .job-container .description {
        padding-left: 0px;
        padding-top: var(--image-spacing);
    }
}

.content {
    display: block;
}
  

Я решил эту проблему, добавив align-self: start; в .job-container img .