Question

我希望图像的高度与文本的高度相同。无论文本多长。我不知道我的错误在哪里以及为什么不起作用。我认为浮动：离开是个问题。我用了一个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。

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%;
}

图片高度与文字高度不同

1 个答案: