html - div 没有响应

问题描述

试图让我的 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>

标签： htmlcss

html - div 没有响应

问题描述

解决方案

推荐阅读