Question

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

标题（img中为紫色）
照片
评论（img中为绿色）

问题是，如果我更改窗口大小，则注释部分不会溢出，而是将其放大到div容器中。

表示需要如下所示： the right way

我成功地通过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>

Answer 1

如果您希望图像设置行的// Put caret at right position again (add four for four spaces) this.selectionStart = this.selectionEnd = start + 4;，则需要通过height从流中获取其他内容（ul）。

您还需要通过模板position:absolute;设置该区域的宽度。

此区域（grid-template-colums）具有.Comments（来自模板）和width（来自img）后，将其设置为height并调整{{1 }}通过coordonates。接下来会出现溢出。

请避免出现ul调整网格大小的想法

position:relative;

ul

Answer 2

<div>
<div style="float:left"></div>
<div style="float:right"></div>
<div style="clear:both"></div>
</div>

未经测试，应该是这样的。一个div具有全部内部，第二个没有绝对确定是一个块，e另外两个必须并排。

您当然可以在您的课程中加入我有我的div风格。

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

2 个答案: