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

Question

Я пытаюсь создать макет без использования JavaScript, точно так же, как прикрепленное изображение, верх и низ - текст, а середина - изображение. Что мне делать, чтобысделать изображения встроенными в линию, не используя JavaScript и сетку.также верхний и нижний текст являются динамическими и могут иметь любую длину.

Answer 1

Пока мы ожидаем установки спецификации уровня 2 сетки CSS, мы можем помочь себе только с display: contents.Для браузера, который не поддерживает это (IE, Edge), у нас будет постепенное снижение с display: flex.

.grid {
  display: flex;
  flex-wrap: wrap;
  padding: 8px;
}
.grid .card {
  display: flex;
  flex-direction: column;
  margin: 8px;
  border: 1px solid;
  box-sizing: border-box;
  flex-basis: calc(100% - 16px);
}
@media (min-width: 641px) {
  .grid .card {
    flex-basis: calc(50% - 16px);
  }
}
@media (min-width: 961px) {
  .grid .card {
    flex-basis: calc(33% - 16px);
  }
}
.grid .card .header,
.grid .card .footer {
  height: auto;
}
.grid .card .content {
  height: 100%;
}

@supports (display: contents) {
  .grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-columns: 1fr;
    grid-auto-flow: column dense;
    padding: 4px;
  }
  @media (min-width: 641px) {
    .grid {
      grid-template-columns: 1fr 1fr;
      grid-auto-columns: 1fr 1fr;
    }
  }
  @media (min-width: 961px) {
    .grid {
      grid-template-columns: 1fr 1fr 1fr;
      grid-auto-columns: 1fr 1fr 1fr;
    }
  }
  .grid .card {
    grid-row-end: span 3;
    display: contents;
    margin: 8px;
    border: 1px solid;
    grid-column-start: 1;
  }
  .grid .card .header,
  .grid .card .content,
  .grid .card .footer {
    grid-column-start: 1;
  }
  @media (min-width: 641px) {
    .grid .card:nth-child(2n+1) {
      grid-column-start: 1;
    }
    .grid .card:nth-child(2n+1) .header,
    .grid .card:nth-child(2n+1) .content,
    .grid .card:nth-child(2n+1) .footer {
      grid-column-start: 1;
    }
    .grid .card:nth-child(2n+2) {
      grid-column-start: 2;
    }
    .grid .card:nth-child(2n+2) .header,
    .grid .card:nth-child(2n+2) .content,
    .grid .card:nth-child(2n+2) .footer {
      grid-column-start: 2;
    }
  }
  @media (min-width: 961px) {
    .grid .card:nth-child(3n+1) {
      grid-column-start: 1;
    }
    .grid .card:nth-child(3n+1) .header,
    .grid .card:nth-child(3n+1) .content,
    .grid .card:nth-child(3n+1) .footer {
      grid-column-start: 1;
    }
    .grid .card:nth-child(3n+2) {
      grid-column-start: 2;
    }
    .grid .card:nth-child(3n+2) .header,
    .grid .card:nth-child(3n+2) .content,
    .grid .card:nth-child(3n+2) .footer {
      grid-column-start: 2;
    }
    .grid .card:nth-child(3n+3) {
      grid-column-start: 3;
    }
    .grid .card:nth-child(3n+3) .header,
    .grid .card:nth-child(3n+3) .content,
    .grid .card:nth-child(3n+3) .footer {
      grid-column-start: 3;
    }
  }
  .grid .card .header,
  .grid .card .content,
  .grid .card .footer {
    margin-left: inherit;
    margin-right: inherit;
    border-left: inherit;
    border-right: inherit;
  }
  .grid .card .header {
    margin-top: inherit;
    border-top: inherit;
  }
  .grid .card .footer {
    margin-bottom: inherit;
    border-bottom: inherit;
    display: flex;
    align-items: flex-end;
  }
}
.header,
.content,
.footer {
  padding: 16px;
}

.header {
  background-color: gold;
}

.content {
  background-color: silver;
}

.footer {
  background-color: goldenrod;
}

body {
  margin: 0;
  padding: 0;
}

<div class="grid">
  <div class="card">
    <div class="header">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur, earum.</div>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium dolor, magnam provident voluptatibus eius magni animi repellat sit molestiae labore voluptatum aperiam pariatur, ex quibusdam laborum porro quaerat! Reiciendis deleniti debitis quasi voluptatem aliquid odit quam quisquam earum? Dolore, voluptates.</div>
    <div class="footer">01</div>
  </div>
  <div class="card">
    <div class="header">Deserunt vero alias explicabo!</div>
    <div class="content">Explicabo voluptatem veniam voluptatibus, eum dolorum aliquam eligendi maxime at dicta voluptate? Maxime, amet dolorem reprehenderit debitis id dolore voluptates aperiam ea aut culpa dolor quas quam hic voluptas quae eum at. Harum hic, adipisci ipsum neque repellat unde at!</div>
    <div class="footer">02 Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus, fugit!</div>
  </div>
  <div class="card">
    <div class="header">Nobis beatae incidunt explicabo!</div>
    <div class="content">Veritatis, sapiente? Optio totam nemo ut, ullam quaerat alias quisquam inventore placeat odio in tempore numquam aliquam quas repudiandae voluptatibus excepturi velit vel ducimus deleniti impedit expedita animi deserunt facilis nulla? Eos dignissimos corporis perspiciatis ducimus cupiditate excepturi, doloremque doloribus!</div>
    <div class="footer">03</div>
  </div>
  <div class="card">
    <div class="header">Dicta, similique. Incidunt, illum?</div>
    <div class="content">Sed quod vitae earum voluptas perspiciatis minima ipsa molestiae incidunt. Perferendis fuga accusamus ut sit suscipit, atque quasi eveniet, animi reiciendis quibusdam eum nulla, veniam sunt! Nihil, quis iusto! Molestias rerum incidunt dolor unde magni ab iusto dolores sed. Corrupti.</div>
    <div class="footer">04</div>
  </div>
  <div class="card">
    <div class="header">Sit, animi! Animi, sint?</div>
    <div class="content">Distinctio nihil voluptatibus perspiciatis deserunt amet voluptate ratione voluptatem. Rerum consectetur delectus autem nam dolores explicabo sequi, pariatur nostrum id sunt?</div>
    <div class="footer">05</div>
  </div>
  <div class="card">
    <div class="header">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia excepturi optio odit asperiores eaque praesentium amet consequuntur non. Excepturi, dolorum!</div>
    <div class="content">Repudiandae ut reiciendis dolores? Porro neque minima, modi illo nam perspiciatis quae necessitatibus, dolorum sunt, fuga atque assumenda dolores nulla nesciunt tempora!</div>
    <div class="footer">06</div>
  </div>
  <div class="card">
    <div class="header">Iure assumenda accusantium perspiciatis?</div>
    <div class="content">Iste expedita et sequi voluptatum iusto dolorem numquam autem qui voluptas sapiente impedit, molestiae dicta deleniti ratione nostrum quae quas cumque veritatis ad eveniet cum dolor excepturi! Neque assumenda tempore minus quae accusamus! Suscipit at autem eaque quisquam dignissimos recusandae.</div>
    <div class="footer">07</div>
  </div>
  <div class="card">
    <div class="header">Natus, quisquam molestiae? Cupiditate.</div>
    <div class="content">Cumque totam qui, veritatis iste vitae veniam culpa maiores quam obcaecati! Ab consequatur quam maxime officia, itaque aut nesciunt magni velit delectus id eligendi temporibus voluptatem saepe officiis vitae asperiores fuga laboriosam! Similique alias vitae quis iure delectus, amet expedita?</div>
    <div class="footer">08</div>
  </div>
  <div class="card">
    <div class="header">Impedit tenetur cum saepe!</div>
    <div class="content">Consequuntur cumque debitis quasi id alias et officia fuga perspiciatis ratione cum accusantium delectus dicta itaque officiis illo quam sapiente ducimus quia reiciendis sunt, magnam numquam quae! Vitae dolorum sit autem ut, necessitatibus cumque neque aspernatur eos, ratione similique commodi!</div>
    <div class="footer">09</div>
  </div>
  <div class="card">
    <div class="header">Repellendus dolorum veniam consequuntur?</div>
    <div class="content">Doloribus autem harum, quibusdam aliquid ex eum animi recusandae id, soluta earum provident officiis ea? Consequuntur perspiciatis libero iusto deserunt tempore? Inventore explicabo eos repudiandae laudantium commodi ad maxime tempore in expedita iste tempora est exercitationem eveniet fugiat, cupiditate ex!</div>
    <div class="footer">10</div>
  </div>
  <div class="card">
    <div class="header">Nemo quia impedit eum?</div>
    <div class="content">Omnis recusandae qui debitis molestias illum nesciunt nostrum, vitae nihil, natus provident distinctio nulla aut non voluptate molestiae ipsum libero quasi unde eius eum. Nobis in dignissimos quos enim est iste quia voluptatum aperiam, beatae itaque ab cupiditate exercitationem ut!</div>
    <div class="footer">11</div>
  </div>
</div>

Answer 2

Создать сетку с (например): flexbox.

.grid {
  width: 100%;
  background: red;
}

.row {
  display: flex;
  flex-flow: row nowrap;
  width: 100%;
}

.column {
  width: 33.33%;
  background: green;
}

img {
  width: 100%;
  height: auto;
}

<div class="grid">
  <div class="row">
    <div class="column">yada</div>
    <div class="column">yada yada yada yada yada yada yada yada yada yada yada yadaaaa oh dear this might even be two lines</div>
    <div class="column">even more yada! but with some extra line stuff</div>
  </div>
  <div class="row">
    <div class="column"><img src="https://images.unsplash.com/photo-1518791841217-8f162f1e1131"></div>
    <div class="column"><img src="https://images.unsplash.com/photo-1518791841217-8f162f1e1131"></div>
    <div class="column"><img src="https://images.unsplash.com/photo-1518791841217-8f162f1e1131"></div>
  </div>
  <div class="row">
    <div class="column">yada yada yada yada yada yada yada yada yada yada yada yadaaaa oh dear this might even be two lines</div>
    <div class="column">even more yada! but with some extra line stuff</div>
    <div class="column">yada</div>
  </div>
</div>

Используя эту структуру, высота каждой строки задается самым высоким столбцом в строке, независимо от содержимого.Это вместо форсирования или фиксации высоты

Кодовое изображение:

Answer 3

Некоторым образом я могу достичь JsFiddle

, но все же я дал статическую высоту нижнему колонтитулу, который я не хотел давать.но это решает мою проблему, но если кто-то, имеющий лучшее решение без фиксированной высоты нижнего колонтитула, будет признателен.

это то, где я не могу изменить структуру, поэтому, пожалуйста, перейдите по ссылке, которой я поделился.

Я обновил код с нижеуказанными свойствами

.header {
    flex: 1;
}
.footer {
    height: 40px;
}

Answer 4

html, body { margin: 0; }
.containers {
  display: flex;
}

.container {
  display: flex;
  width: 300px;
  flex-direction: column;
}

main {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  background-color: #eee;
}

main > img {
  margin-top: auto;
  max-width: 100%;
  height: auto;
}

header, footer {
  background-color: #ccc;
  padding: 1em;
  text-align: center;
  height: 38px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Align Image inline</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div class="containers">
      <div class="container">
        <header>Header Header Header Header Header Header
        Header Header Header Header Header Header
        Header Header Header Header Header Header</header>
        <main>
          <img src="https://placekitten.com/g/400/200" alt="" />
        </main>
        <footer>Footer</footer>
      </div>
      <div class="container">
        <header>Header</header>
        <main>
          <img src="https://placekitten.com/g/400/200" alt="" />
        </main>
        <footer>Footer Footer Footer Footer Footer Footer Footer Footer </footer>
      </div>
      <div class="container">
        <header>Header</header>
        <main>
          <img src="https://placekitten.com/g/400/200" alt="" />
        </main>
        <footer>Footer</footer>
      </div>
    </div>
  </body>
</html>

Добавьте CSS, чтобы добавить ellipsis, если заголовок содержит более 3 строк

https://jsfiddle.net/q6herk2c/4/888