当上方和下方文本有任何长度时，如何对卡片图像进行内联对齐？

问题描述 投票：5回答：4

enter image description here

我正在尝试不使用JavaScript创建布局，就像图片附加，顶部和底部是文本，中间是图像，我应该怎么做才能使图像内联对齐，而不使用JavaScript和网格。顶部和底部文本也是动态的，可以是任意长度。

css css3
4个回答
0
投票

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>

如果标题超过3行，添加css以添加ellipsis

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

0
投票

使用（例如）：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>

使用此结构，每行的高度由行中的最高列设置，而不管内容如何。这不是强迫或固定高度

Codepen图片：enter image description here

0
投票

一些我如何能够实现JsFiddle

但我仍然给页脚静态高度，我不想给它。但这是解决我的问题，但如果有人有更好的解决方案与固定的页脚高度，将赞赏。

这是我无法改变结构的地方，所以请按照我分享的链接。

我使用以下属性更新了代码

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

在我们等待设置CSS Grid Layout Level 2规范的同时，我们只能帮助自己使用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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.