试图让我的div响应。似乎无法实现这一点。图像的大小调整得很好，但文本div的大小则不然。它们只是在页面调整大小时隐藏起来。我可能一开始就没有做好这件事。请看一下，让我知道我需要改变什么。
感谢您提供的任何帮助。
.responsive .containerCollab {
max-width: 1110px;
}
.containerCollab {
display: grid;
width: 90%;
height: 100%;
max-width: 1110px;
min-width: 500px;
margin: auto;
grid-template-areas: "a-XQDl2-0 NameTitle"
"a-w0pwv-0 HR1"
"left right"
"a-79302-0 HR2";
grid-template-columns: 01fr 4fr;
grid-template-rows: 70px 30px 160px 30px;
}
.containerCollab>div {
border: px dashed #888;
float: left;
}
.a-XQDl2-0 {
grid-area: a-XQDl2-0;
}
.NameTitle {
grid-area: NameTitle;
position: relative;
top: 30px;
left: 75px;
}
.NameTitleText {
font: 28px pt sans, sans-serif;
}
.HR1 {
grid-area: HR1;
position: relative;
top: 30px;
}
.HR1line hr {
max-width: 700px;
width: 700px;
border-color: #3579b5;
}
.HR2 {
grid-area: HR1;
position: relative;
bottom: 20px;
}
.HR2line hr {
max-width: 818px;
width: 818px;
border-color: #3579b5;
}
.left {
grid-area: left;
}
.leftimg {
margin: auto;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
.leftimg img {
width: 250px;
position: relative;
}
.right {
grid-area: right;
margin: auto;
}
.righttext p {
max-width: 78%;
text-align: left;
margin: auto;
position: relative;
float: right;
margin-right: 10%;
width: 100%;
}
.HR2 {
grid-area: HR2;
}<!DOCTYPE html>
<html>
<head>
<title>HTML, CSS and JavaScript demo</title>
</head>
<body>
<!-- Start your code here -->
<div id="wrap_all">
<div class="containerCollab">
<div class="NameTitle">
<div class="NameTitleText">
<p>Collaborations</p>
</div>
</div>
<div class="HR1">
<div class="HR1line">
<hr />
</div>
</div>
<div class="left">
<div class="leftimg">
<img src="https://www.w3schools.com/html/img_girl.jpg" />
</div>
</div>
<div class="right">
<div class="righttext">
<p>lorem ipsum lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum .<br />
<br />
lorem ipsum lorem ipsumlorem ipsumlorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum.</p>
</div>
</div>
<div class="HR2">
<div class="HR1line">
<hr />
</div>
</div>
</div>
</div>
<!-- End your code here -->
</body>
</html>如果您正在寻找响应式网页，网页上的元素，您可能需要查看Bootstrap
如果你按照他们在页面上设置的方式，你会看到它有所改进。此外，正如其他一些人所提到的，如果您想要响应性，您确实而不是想要固定的px集。你更想要vw/vh，百分比。
w3schools也有一些关于响应性的简单入门演示。你可能想看看。