javascript - 并排对齐图像和文本并将文本最大高度设置为 img hieght

问题描述

我不知道如何在 div 容器（css 网格）中放置 3 个元素，并保持页面响应。

标题（图片中的紫色）
照片
评论（图片中的绿色）

问题是，如果我更改窗口大小，评论部分不会溢出，而是它的 div 容器很大。

但它需要看起来像这样：正确的方式

我成功地通过 max-height: 和 overflow:scroll 实现了这一点，但我相信必须有一种更简单的方法（当然，对于 max-height 部分），并且更实用。

.post-container {
  background-color: rgb(0, 224, 255);
  display: grid;
  grid-template-areas: 'title title' 'photo comments';
  grid-gap: 10px;
  padding: 10px;
}

.Title {
  background-color: rgb(47, 0, 99);
  width: 100%;
  grid-area: title;
  color: white;
}

.Photo {
  grid-area: photo;
}

.Comments {
  background-color: rgb(11, 75, 82);
  grid-area: comments;
  color: white
}

.post-container img {
  width: 100%;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="style.css" type="text/css">
</head>

<body>
  <div class="post-container">
    <div class="Title">
      <h1>comment Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cur post Tarentum ad Archytam? Idem iste, inquam, de voluptate quid sentit? </h1>
    </div>
    <div class="Photo">
      <img src="https://images.pexels.com/photos/1210543/pexels-photo-1210543.jpeg?cs=srgb&dl=architecture-bay-blue-1210543.jpg&fm=jpg" alt="">
    </div>
    <div class="Comments">
      <ul>
        <li>comment comment Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cur post Tarentum ad Archytam? Idem iste, inquam, de voluptate quid sentit?</li>
        <li>comment comment Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cur post Tarentum ad Archytam? Idem iste, inquam, de voluptate quid sentit?</li>
        <li>comment comment Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cur post Tarentum ad Archytam? Idem iste, inquam, de voluptate quid sentit?</li>
        <li>comment comment Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cur post Tarentum ad Archytam? Idem iste, inquam, de voluptate quid sentit?</li>
      </ul>
    </div>
  </div>
</body>

</html>

标签： javascripthtmlcssfrontendcss-grid

解决方案

如果您希望图像设置行的，则需要通过将height其他内容（）从流中取出。ulposition:absolute;

您还需要通过模板设置该区域的宽度grid-template-colums。

一旦这个 area( .Comments) 有一个width（来自模板）和一个height（来自 img），设置它position:relative;并调整ul通孔坐标的大小。接下来会溢出。

下面演示了避免 ul 调整网格大小的想法

.post-container {
  background-color: rgb(0, 224, 255);
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-areas: 'title title' 'photo comments';
  grid-gap: 10px;
  padding: 10px;
}

.Title {
  background-color: rgb(47, 0, 99);
  width: 100%;
  grid-area: title;
  color: white;
}

.Photo {
  grid-area: photo;
}

.Photo img {
  vertical-align: top;
}

.Comments {
  background-color: rgb(11, 75, 82);
  grid-area: comments;
  color: white;
  position: relative;
}

.Comments ul {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  overflow: auto;
}

.post-container img {
  width: 100%;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="style.css" type="text/css">
</head>

<body>
  <div class="post-container">
    <div class="Title">
      <h1>comment Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cur post Tarentum ad Archytam? Idem iste, inquam, de voluptate quid sentit? </h1>
    </div>
    <div class="Photo">
      <img src="https://images.pexels.com/photos/1210543/pexels-photo-1210543.jpeg?cs=srgb&dl=architecture-bay-blue-1210543.jpg&fm=jpg" alt="">
    </div>
    <div class="Comments">
      <ul>
        <li>comment comment Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cur post Tarentum ad Archytam? Idem iste, inquam, de voluptate quid sentit?</li>
        <li>comment comment Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cur post Tarentum ad Archytam? Idem iste, inquam, de voluptate quid sentit?</li>
        <li>comment comment Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cur post Tarentum ad Archytam? Idem iste, inquam, de voluptate quid sentit?</li>
        <li>comment comment Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cur post Tarentum ad Archytam? Idem iste, inquam, de voluptate quid sentit?</li>
      </ul>
    </div>
  </div>
</body>

</html>

javascript - 并排对齐图像和文本并将文本最大高度设置为 img hieght

问题描述

解决方案

推荐阅读