如何为网站水平堆叠 CSS 元素

Question

我正在构建我的第一个真实网页，并试图弄清楚如何在主屏幕上正确堆叠元素。我已经阅读并尝试过类似的帖子，但它们似乎没有做我需要的。目前我的主页看起来像这样（忽略页面底部的列表和订阅/登录按钮。它们只是默认主题的一部分）：

这是使用以下代码实现的： HTML：

<div class="desc-pic-parent">
    <div class="homepage-description">
        <div class="homepage-description-header">
            Hi! I'm Lewis Cooper
        </div>
        <div class="homepage-description-text">
            This is a description of me. I will put quite a bit of text here so that I can get a rough idea of what it's going to look like in the final edit of the webpage
        </div>
    </div>
    <div class="square-pretend-img"></div>
</div>

CSS：

@media (min-width: 1001px) {
    .disc-pic-parent {
        grid-column: 1 / span 3;
        display: grid;
        grid-gap: 4vmin;
        grid-template-columns: 1fr 1fr 1fr;
        min-height: 280px;
        border-top: 0;
    }


    .homepage-description{
        text-align: left;
        display: grid;
        grid-gap: 4vmin;
        grid-template-columns: 1fr 1fr;
        min-height: 280px;
        border-top: 0;
    }

    .homepage-description-header{
        font-size: 3rem;
        margin-top: 0;
    }

    .square-pretend-img{
        position: relative;
        height: 20rem;
        width: 20rem;
        background-color: #555;
        grid-column: 2 / span 2;
    }
}

我的目标是尝试让它看起来像这样的草图：

Answer 1

在主布局中使用网格的想法很好，即使文本太长也可以保持文本宽度不变，但您还在左侧框中放置了一个网格，这不是您的布局所需的图像显示。您还为网格提供了 img 定义的尺寸和定义的列跨度。

这个 sn-p 只是认为您希望 img 具有给定的尺寸，因此删除了额外的网格信息。

@media (min-width: 1001px) {
  .desc-pic-parent {
    display: grid;
    grid-gap: 4vmin;
    grid-template-columns: 1fr 1fr;
    min-height: 280px;
    border-top: 0;
  }
  .homepage-description {
    text-align: left;
    min-height: 280px;
    border-top: 0;
  }
  .homepage-description-header {
    font-size: 3rem;
    margin-top: 0;
  }
  .square-pretend-img {
    position: relative;
    height: 20rem;
    width: 20rem;
    background-color: #555;
  }
}

<div class="desc-pic-parent">
  <div class="homepage-description">
    <div class="homepage-description-header">
      Hi! I'm Lewis Cooper
    </div>
    <div class="homepage-description-text">
      This is a description of me. I will put quite a bit of text here so that I can get a rough idea of what it's going to look like in the final edit of the webpage
    </div>
  </div>
  <div class="square-pretend-img"></div>
</div>

注意：您可能希望从媒体查询中提取一些样式，并将其用于所有视口尺寸。

Answer 2

这可以使用flexbox 轻松实现。 只需将这两个 div 包裹在另一个 div 中，然后将 display: flex 给该 div。