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

时间：2019-02-21 07:45:18

标签： css css3

enter image description here

我正尝试在不使用JavaScript的情况下创建布局，就像附上图片一样， 顶部和底部是文本，中间是图像，我该怎么做才能使图像彼此内联而不使用JavaScript和网格。顶部和底部的文本都是动态的，可以是任意长度。

4 个答案:

答案 0 :(得分：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

答案 1 :(得分：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

答案 2 :(得分：0)

一些如何实现JsFiddle

但是我仍然为页脚设置了静态高度，这是我不想给出的。但这解决了我的问题，但是如果有人在没有固定页脚高度的情况下提供更好的解决方案，将不胜感激。

这是我无法更改结构的地方，因此请不要使用我共享的链接。

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

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

答案 3 :(得分：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>

相关问题
最新问题