Question

问题是我在屏幕的左侧有一个图像，在屏幕的右侧有一个段落，并且在该段落和图像下方有一条hr线。因此，每当我调整浏览器窗口的大小时，该段落就会在hr行下方，因为它在调整大小时会被压缩（压缩）。即使调整浏览器窗口的大小，我也不希望段落低于hr行。我希望段落位于图片下方，但不要超过hr线。如果您想查看问题所在，请访问我的网站并调整浏览器窗口的大小以查看问题。

链接到网站：http://www.greenfield-school.com/AboutUs.html

谢谢

这是HTML：

<h3><b>About Us</b></h3>
    <hr style="border: 2px solid green; width: 88%">
    <div class="row2">
  <div class="column2" style="background-color:;">
    <img class="pic img-responsive" src="Icon.jpeg" style="height: 200px; height: 230px">
  </div>
  <div class="column" style="background-color:;">
    <h5 class="welcome"><b>Mission</b></h5>
     <p class="paragraph" style="font-family: book antiqua"><li class="vision1">To care for, respect and encourage all children equally, regardless of gender or ability.</li>
     <li class="vision1">To encourage our pupils to develop a sense of self worth, self discipline, personal responsibility and consideration for others.</li>
     <li class="vision1">To provide an enjoyable, challenging and purposeful atmosphere for our pupils.</li>
     <li class="vision1">To value and encourage the special talents and strengths of pupils.</li></p>

  </div>
</div>

这是CSS：

.vision1 {

    list-style-type: square;
    font-family: book-antiqua;
}

.row2{
  display: flex;
  padding: 2rem 6rem;
}


.column {
  flex: 60%;
  height: 200px; /* Should be removed. Only for demonstration */
}

.column2{
  flex: 0%;
  height: 0px; /* Should be removed. Only for demonstration */
}

h3{
    padding: 5rem 5rem 0rem;
    color: green;
}

Answer 1

让我为您提供另一种选择-我似乎无法在container height上触发该自动调整。但这可以无缝进行：

这是您的HTML：

<div class="container">
  <div class="column one"> Column 1 - this is where your picture is</div>
  <div class="column two"> Column 2 - this is where your paragraph is</div>
</div>
<hr />

这是CSS：

.container{
  width: 100%;
  overflow: auto;
  height: auto;
  clear: both;
  display: block;
}
.column{
  float: left;
}

.column.one{
    //style for column one here
}
.column.two{
    //style for column two here
}

hr{
  clear: both;
}

这将基于container或column one的最大高度来调整column two的高度

我已经在CodePen

处检查过此代码

为什么我的段落超出调整大小段落下方的hr线？

1 个答案: