div 旁边的网格外图像

Question

我想将图像粘贴到屏幕的左侧，并在其右侧放置一个 div，因此这两个元素将具有相同的高度，并且在更改浏览器宽度的情况下会换行。

我尝试过以下代码
HTML：

<!-- some divs berore -->

<div id = "imageSection">

    <div id = "myImageDiv">
        <img id = "myImage" src = "path/to/myImage.png">
    </div>

    <div id = "myText">
        <h3>headline</h3>
        <p>Lorem ipsum<p>
    </div>

</div>

<!-- some divs further -->

CSS：

#imageSection
{
    width: 100%;
}

#myImageDiv
{
    width: 45%;
    position: absolute;
    left: 0;
}

#myImage
{
    width: 100%;
}

#myText
{
    padding-left: 60%;
}

使用此解决方案，图像确实粘在左侧，并且另一个 div 位于右侧，但它们的高度不同，并且不会将一个 div 包裹在另一个 div 下。

Answer 1

您可以使用网格来确保文本区域的高度与图像的高度相同。

为此，请让图像具有其单元格的完整宽度并具有相关的高度（自动）。为了确保网格将行高设置为此而不是对文本元素进行任何注意，请将右侧元素的内容放入另一个 div 中并使该位置成为绝对位置。这样，设置网格行高度的唯一因素就是图像高度。

<!-- some divs berore -->

<div id="imageSection">

  <div id="myImageDiv">
    <img id="myImage" src="https://picsum.photos/id/1015/300/200">
  </div>

  <div id="myText">
    <div>
      <h3>headline</h3>
      <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem
        ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
        Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem
        ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
        Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem
        ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
        Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem
        ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
        Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Last phrase</p>
    </div>
  </div>

</div>

<!-- some divs further -->
<style>
  * {
    margin: 0;
  }
  
  #imageSection {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: 10px;
    /* set to what you want */
  }
  
  #myText {
    height: 100%;
    width: 100%;
    overflow: auto;
    position: relative;
  }
  
  #myText>div {
    position: absolute;
  }
  
  #myImage {
    width: 100%;
  }
  
  @media (max-width: 500px) {
    #imageSection {
      display: block;
    }
    #myText {
      height: fit-content;
    }
    #myText>div {
      position: relative;
    }
  }
</style>

注意：默认边距会被 * 设置覆盖。

对于较窄的视口，此代码片段只是将图像和文本设置为“正常”，因此一个位于另一个的下方。您当然可以限制文本的大小，例如有最大高度，但问题中没有详细说明要求。