时间戳

首页 > 解决方案 > 使用图像的宽度作为标题和文本

html - 使用图像的宽度作为标题和文本

问题描述

我正在尝试创建 5 列，其中每列都有一个标题、图像和一些文本。每个可能是不同的大小。根据图像宽度，如何将该宽度分配给列标题和文本？

目标是让标题在图像上方居中，文本在图像下方居中，同时所有标题都从同一行开始，所有图像都从同一行开始，所有文本都从同一行开始

.column {
  display: flex: 
  flex-direction:column;
}

.row {
  display: flex;
  justify-content: space-evenly;
}

.row div{
border:solid 1px red;
text-align:center;}
<div class='column'>
  <div class='row'>
    <div>title1</div>
    <div>title2<br>title2</div>
    <div>title3</div>
    <div>title4</div>
    <div>title5</div>
  </div>
  <div class='row'>
  <div>
    <img src='https://via.placeholder.com/150'>
    </div><div>
    <img src='https://via.placeholder.com/150'>
    </div><div>
    <img src='https://via.placeholder.com/350'>
    </div><div>
    <img src='https://via.placeholder.com/250'>
    </div><div>
    <img src='https://via.placeholder.com/150'>
    </div>
  </div>
  <div class='row'>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a sagittis lacus, a consectetur mi. Mauris facilisis diam eu dui euismod bibendum. Cras et metus eleifend, sollicitudin nulla ornare, placerat enim. Maecenas in diam in mauris elementum efficitur sed vitae sapien. In hac habitasse platea dictumst. Integer vitae ex non lacus posuere auctor. Quisque nec nibh sed ipsum tempus vulputate et in dui. In dapibus, lacus eget pellentesque lobortis, nunc libero molestie felis, eget sodales nisl magna sit amet metus. Aenean id sapien in ligula iaculis finibus eget id dolor. Aenean non nulla eu ex rhoncus facilisis. Sed efficitur sagittis nulla ultricies venenatis. Vivamus lacinia pulvinar fermentum. Sed mattis tincidunt justo. Morbi finibus cursus lobortis.</div>
    <div>Pellentesque hendrerit eleifend lectus. Mauris congue libero quis blandit elementum. Nunc posuere accumsan arcu vitae pellentesque. Pellentesque placerat neque urna, et scelerisque magna sodales sit amet. Nulla consequat mi vel justo vulputate dictum. Phasellus lorem felis, feugiat eget diam mollis, pretium porttitor sem. Etiam viverra sit amet massa sed consectetur. Nam et massa ut massa euismod cursus vel vitae augue. Pellentesque egestas tortor eu odio porttitor tempus.</div>
    <div>Quisque sit amet mattis mi. Curabitur vel nunc orci. In vehicula fermentum euismod. Nullam ex justo, sollicitudin nec magna non, malesuada ultricies lacus. Aenean ut scelerisque dolor. Phasellus accumsan volutpat neque ac convallis. Aenean dignissim, felis vitae finibus mattis, ante magna mattis arcu, at ullamcorper nisi sapien eu massa. Nullam vehicula ultricies quam eget finibus. Sed ut fermentum libero, sed accumsan ante. Praesent vel laoreet lacus. Sed interdum, ante sed aliquet auctor, tortor elit viverra turpis, quis posuere nunc erat in purus.</div>
    <div>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi sit amet pretium est. Suspendisse dolor orci, lacinia tempus magna ac, tempor rutrum ipsum. Pellentesque tempor erat faucibus faucibus aliquet. Nullam nec aliquam nibh. Mauris et enim facilisis, euismod lectus vitae, tempus ligula. Sed mattis faucibus ligula, at molestie neque sagittis a. Pellentesque eu felis porta, volutpat mauris eu, congue ante. Quisque malesuada sit amet magna vel consectetur. Sed venenatis est et turpis posuere, sit amet pretium erat fringilla. Nunc sit amet nulla nec lectus eleifend faucibus. Donec quam orci, laoreet ut ligula eget, tincidunt auctor ante.</div>
    <div>Nunc sed blandit nulla. Cras molestie sem a elit blandit sollicitudin. Curabitur in ex gravida, faucibus felis at, vestibulum nunc. Sed ultricies enim et mi gravida varius a et arcu. Cras id libero leo. Nunc egestas libero dolor, tempus sollicitudin felis varius at. Donec sollicitudin lorem nec ipsum aliquet efficitur. Maecenas interdum libero vitae purus euismod, at fringilla odio posuere. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur pellentesque nisl pellentesque, semper quam ac, commodo tortor.</div>
  </div>
</div>

标签： htmlcssflexbox

解决方案

不同行中的内容元素不是同级元素。他们是堂兄弟。

这意味着一行中的内容元素与其他行中的内容元素没有直接关联。

因此，它们不能相互对齐。

更多细节：

根据图像宽度，如何将该宽度分配给列标题和文本？目标是让标题在图像上方居中，文本在图像下方居中。

您需要更改 HTML（使所有内容元素成为同级元素），等到 CSS 子网格功能或display: contents有可靠的浏览器支持，或使用 JavaScript。

更多细节：

这是一个具有“扁平化” HTML 结构的解决方案：

.column {
  display: grid;
  grid-column-gap: 1px;
  text-align: center;
}

.title {
  grid-row: 1;
}

.image {
  grid-row: 2;
}

.text {
  grid-row: 3;
}
<div class='column'>
  <div class="title">title1</div>
  <div class="title">title2<br>title2</div>
  <div class="title">title3</div>
  <div class="title">title4</div>
  <div class="title">title5</div>
  <div class="image">
    <img src='https://via.placeholder.com/150'>
  </div>
  <div class="image">
    <img src='https://via.placeholder.com/150'>
  </div>
  <div class="image">
    <img src='https://via.placeholder.com/350'>
  </div>
  <div class="image">
    <img src='https://via.placeholder.com/250'>
  </div>
  <div class="image">
    <img src='https://via.placeholder.com/150'>
  </div>
  <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a sagittis lacus, a consectetur mi. Mauris facilisis diam eu dui euismod bibendum. Cras et metus eleifend, sollicitudin nulla ornare, placerat enim. Maecenas in diam in mauris elementum efficitur
    sed vitae sapien. In hac habitasse platea dictumst. Integer vitae ex non lacus posuere auctor. Quisque nec nibh sed ipsum tempus vulputate et in dui. In dapibus, lacus eget pellentesque lobortis, nunc libero molestie felis, eget sodales nisl magna
    sit amet metus. Aenean id sapien in ligula iaculis finibus eget id dolor. Aenean non nulla eu ex rhoncus facilisis. Sed efficitur sagittis nulla ultricies venenatis. Vivamus lacinia pulvinar fermentum. Sed mattis tincidunt justo. Morbi finibus cursus
    lobortis.
  </div>
  <div class="text">Pellentesque hendrerit eleifend lectus. Mauris congue libero quis blandit elementum. Nunc posuere accumsan arcu vitae pellentesque. Pellentesque placerat neque urna, et scelerisque magna sodales sit amet. Nulla consequat mi vel justo vulputate dictum.
    Phasellus lorem felis, feugiat eget diam mollis, pretium porttitor sem. Etiam viverra sit amet massa sed consectetur. Nam et massa ut massa euismod cursus vel vitae augue. Pellentesque egestas tortor eu odio porttitor tempus.</div>
  <div class="text">Quisque sit amet mattis mi. Curabitur vel nunc orci. In vehicula fermentum euismod. Nullam ex justo, sollicitudin nec magna non, malesuada ultricies lacus. Aenean ut scelerisque dolor. Phasellus accumsan volutpat neque ac convallis. Aenean dignissim,
    felis vitae finibus mattis, ante magna mattis arcu, at ullamcorper nisi sapien eu massa. Nullam vehicula ultricies quam eget finibus. Sed ut fermentum libero, sed accumsan ante. Praesent vel laoreet lacus. Sed interdum, ante sed aliquet auctor, tortor
    elit viverra turpis, quis posuere nunc erat in purus.</div>
  <div class="text">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi sit amet pretium est. Suspendisse dolor orci, lacinia tempus magna ac, tempor rutrum ipsum. Pellentesque tempor erat faucibus faucibus aliquet. Nullam nec
    aliquam nibh. Mauris et enim facilisis, euismod lectus vitae, tempus ligula. Sed mattis faucibus ligula, at molestie neque sagittis a. Pellentesque eu felis porta, volutpat mauris eu, congue ante. Quisque malesuada sit amet magna vel consectetur.
    Sed venenatis est et turpis posuere, sit amet pretium erat fringilla. Nunc sit amet nulla nec lectus eleifend faucibus. Donec quam orci, laoreet ut ligula eget, tincidunt auctor ante.</div>
  <div class="text">Nunc sed blandit nulla. Cras molestie sem a elit blandit sollicitudin. Curabitur in ex gravida, faucibus felis at, vestibulum nunc. Sed ultricies enim et mi gravida varius a et arcu. Cras id libero leo. Nunc egestas libero dolor, tempus sollicitudin
    felis varius at. Donec sollicitudin lorem nec ipsum aliquet efficitur. Maecenas interdum libero vitae purus euismod, at fringilla odio posuere. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Orci varius
    natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur pellentesque nisl pellentesque, semper quam ac, commodo tortor.</div>
</div>

推荐阅读