html - 图像与文本的高度不同

Question

我希望图像与文本高度相同。不管文字多长。我不知道我的错误在哪里以及为什么它不起作用。我认为 float: left 是个问题。我使用了 Clearfix。不可能这样。在这种情况下不应使用 Flexbox。

结果应该是这样的:

这是我的代码:

* {
  box-sizing: border-box;
  margin:0;
  padding: 0;
}

html{
  font-size: 62.5%;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Raleway', 'Lato', 'Helvetica Neue', 'Arial', sans-serif;
  font-size: 1.6rem;
}

/* *** START: Clearfix *** */
.clearfix::after {
  content:"";
  clear: both;
  display: block;
}
/* *** END: Clearfix *** */


section#test1 {
  background-color: #3d3f45;
  color: #fff;
  margin-bottom: 0;
}

section#test1 div h1 {
  text-align: center;
  font-size: 3rem;
  margin: 3rem 0;
  padding-top: 4rem;
}

section#test1 div p {
  margin-bottom: 1rem;
  padding: 0 2rem;
}

section#test1 p:last-of-type {
  padding-bottom: 4rem;
}

section#test1 .test2 > div {
  display: inline-block;
}

section#test1 .test2 div:first-of-type {
  float:left;
  width: 70%;
}

section#test1 .test2 div:last-of-type {
  float:right;
}

section#test1 .test2 div:last-of-type img {
  height:100%;
  width: auto;
}

<section id="test1">

      <div>
          <h1>Lorem Ipsum</h1>
      </div>


      <div class="test2 clearfix">

        <div>
          <p>Lorem ipsum dolor amet aesthetic forage tumeric kinfolk kickstarter, locavore meditation ugh. Vexillologist art party shoreditch meditation roof party. Beard ethical offal helvetica palo santo austin health goth. Hoodie venmo cold-pressed, green juice adaptogen hexagon neutra portland narwhal kale chips hashtag sriracha put a bird on it tofu. Beard banjo taiyaki readymade 90's, raclette art party irony lyft green juice humblebrag meh.</p>
          <p>Literally small batch poutine distillery vice, trust fund gentrify. Ramps williamsburg swag woke. Lyft viral activated charcoal williamsburg. Neutra ennui fanny pack mustache pok pok sustainable activated charcoal. Artisan biodiesel ugh messenger bag woke activated charcoal vape heirloom meditation scenester deep v pour-over organic subway tile.</p>
          <p>Etsy mumblecore banh mi banjo church-key +1. Fam YOLO salvia glossier actually affogato. Keytar af vinyl, literally man bun hell of normcore taxidermy lo-fi everyday carry. Iceland pork belly unicorn, pour-over trust fund live-edge brooklyn sustainable occupy truffaut. Banh mi chartreuse small batch photo booth pok pok PBR&B blog, taxidermy locavore. Sriracha farm-to-table scenester, shabby chic before they sold out chartreuse williamsburg coloring book letterpress unicorn hoodie.</p>
          <p>Literally small batch poutine distillery vice, trust fund gentrify. Ramps williamsburg swag woke. Lyft viral activated charcoal williamsburg. Neutra ennui fanny pack mustache pok pok sustainable activated charcoal. Artisan biodiesel ugh messenger bag woke activated charcoal vape heirloom meditation scenester deep v pour-over organic subway tile.</p>
          <p>Literally small batch poutine distillery vice, trust fund gentrify. Ramps williamsburg swag woke. Lyft viral activated charcoal williamsburg. Neutra ennui fanny pack mustache pok pok sustainable activated charcoal. Artisan biodiesel ugh messenger bag woke activated charcoal vape heirloom meditation scenester deep v pour-over organic subway tile.</p>
          <p>Literally small batch poutine distillery vice, trust fund gentrify. Ramps williamsburg swag woke. Lyft viral activated charcoal williamsburg. Neutra ennui fanny pack mustache pok pok sustainable activated charcoal. Artisan biodiesel ugh messenger bag woke activated charcoal vape heirloom meditation scenester deep v pour-over organic subway tile.</p>
        </div>

        <div>
          <img src="https://www1.xup.in/exec/ximg.php?fid=11811719" alt="Logo">
        </div>

      </div>
  </section>

Answer 1

您所要做的就是将高度 100% 更改为图像父 div。我已将类图像赋予图像父 div，将高度赋予测试 div。

HTML代码

<section id="test1">

      <div>
          <h1>Lorem Ipsum</h1>
      </div>


      <div class="test2 clearfix">

        <div class="paragraph">
          <p>Lorem ipsum dolor amet aesthetic forage tumeric kinfolk kickstarter, locavore meditation ugh. Vexillologist art party shoreditch meditation roof party. Beard ethical offal helvetica palo santo austin health goth. Hoodie venmo cold-pressed, green juice adaptogen hexagon neutra portland narwhal kale chips hashtag sriracha put a bird on it tofu. Beard banjo taiyaki readymade 90's, raclette art party irony lyft green juice humblebrag meh.</p>
          <p>Literally small batch poutine distillery vice, trust fund gentrify. Ramps williamsburg swag woke. Lyft viral activated charcoal williamsburg. Neutra ennui fanny pack mustache pok pok sustainable activated charcoal. Artisan biodiesel ugh messenger bag woke activated charcoal vape heirloom meditation scenester deep v pour-over organic subway tile.</p>
          <p>Etsy mumblecore banh mi banjo church-key +1. Fam YOLO salvia glossier actually affogato. Keytar af vinyl, literally man bun hell of normcore taxidermy lo-fi everyday carry. Iceland pork belly unicorn, pour-over trust fund live-edge brooklyn sustainable occupy truffaut. Banh mi chartreuse small batch photo booth pok pok PBR&B blog, taxidermy locavore. Sriracha farm-to-table scenester, shabby chic before they sold out chartreuse williamsburg coloring book letterpress unicorn hoodie.</p>
          <p>Literally small batch poutine distillery vice, trust fund gentrify. Ramps williamsburg swag woke. Lyft viral activated charcoal williamsburg. Neutra ennui fanny pack mustache pok pok sustainable activated charcoal. Artisan biodiesel ugh messenger bag woke activated charcoal vape heirloom meditation scenester deep v pour-over organic subway tile.</p>
          <p>Literally small batch poutine distillery vice, trust fund gentrify. Ramps williamsburg swag woke. Lyft viral activated charcoal williamsburg. Neutra ennui fanny pack mustache pok pok sustainable activated charcoal. Artisan biodiesel ugh messenger bag woke activated charcoal vape heirloom meditation scenester deep v pour-over organic subway tile.</p>
          <p>Literally small batch poutine distillery vice, trust fund gentrify. Ramps williamsburg swag woke. Lyft viral activated charcoal williamsburg. Neutra ennui fanny pack mustache pok pok sustainable activated charcoal. Artisan biodiesel ugh messenger bag woke activated charcoal vape heirloom meditation scenester deep v pour-over organic subway tile.</p>
           <p>Literally small batch poutine distillery vice, trust fund gentrify. Ramps williamsburg swag woke. Lyft viral activated charcoal williamsburg. Neutra ennui fanny pack mustache pok pok sustainable activated charcoal. Artisan biodiesel ugh messenger bag woke activated charcoal vape heirloom meditation scenester deep v pour-over organic subway tile.</p>
        </div>

        <div class="image">
          <img src="https://www1.xup.in/exec/ximg.php?fid=11811719" alt="Logo">
        </div>

      </div><!--/test2-->
  </section>

CSS code--

.test2{
  height:800px;
}

.image{
  height:100%;
}