时间戳

首页 > 解决方案 > 为什么我的段落超出了调整大小段落下方的 hr 行？

html - 为什么我的段落超出了调整大小段落下方的 hr 行？

问题描述

问题是我的屏幕左侧有一个图像，我的屏幕右侧有一个段落，段落和图像下方有一条 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;
}

标签： htmlbootstrap-4

解决方案

让我为您提供一个替代方案 - 我似乎无法在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

推荐阅读