Question

我有问题。我希望我的页面能够响应，但不知何故，当应用flex并将分辨率更改为更低时，左列div中的文本将从容器中转出。相反，它应该推动父div高度。这是发生的事情：

<div class="container" id="ct-about-div">
        <h2 id="ct-about-text1">Know about us</h2>
        <div id="ct-rect"></div>
        <span id="ct-about-text2">Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim</span>
<div id="diagonal">
  <div class="col-md-offset-2 col-md-4" id="ct-about-col-left">
    <h3>We are the best</h3>
    <p>Consectetur adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat</p>
    <p>Valutpat wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper 
        suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum
        iriure dolor in hendrreit in volputate velit esse molestie consequat, vel illum
        dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
        dignissim qui blandit praesent luptatum zzril delenit augue duis dolore 
        te feugait nulla fascilisi. Nam libre tempor cum</p>
    <div>
      <span>Read more</span>
    </div>
  </div>
<div class="col-md-6" id="ct-about-col-right"></div>
</div>
</div>

CSS：

#ct-about-div {
  height: 100%;
  width:100%;
  border: 1px solid blue;
  text-align: center;
    #ct-about-text1{
        font-size: 40px;
    font-family: "Raleway";
    color: grey;
    font-weight: bold;
    text-transform: uppercase;
    }
  #ct-rect{
    background: grey;
    height: 9px;
    width: 90px;
    margin: auto;
  }
  #ct-about-text2{   
    font-size: 18px;
    font-family: "Raleway";
    color: rgb(33, 33, 33);
    text-align: center;
  }
}
#diagonal{
  display: flex;
  text-align: left;
  width: 100%;
  height: 100%;
  background: rgb(245, 245, 245);
  border: 3px solid blue;
  #ct-about-col-left{
    width: 100%;
    height: 500px;
    border: 1px solid red;
    h3{
      font-size: 24px;
      font-family: "Raleway";
      color: black;
      text-transform: uppercase;
      line-height: 1.25;
    }
    p{
      font-size: 16px;
      font-family: "Raleway";
      color: rgb(0, 0, 0);
      line-height: 1.875;
    }
    div{
      border: 3px solid;
      span{

      }
    }
  }
  #ct-about-col-right{
    height: 500px;
    width: 100%;
    border: 2px solid;
    background-image: url(images/content/about/right-col-image2.png);
    background-repeat: no-repeat;
    background-size: cover;
  }  
}

Answer 1

只需删除任何高度声明，框将自动缩放高度

具体做法是：

#ct-about-col-left{
 width: 100%;
height: 500px;

删除此处的500px声明

文本转义容器

1 个答案: