如何为网站水平堆叠 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

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

Answer 2

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

此代码段只是假设您希望 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>

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

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

How to stack CSS elements horizontally for websites

html

css

layout

element

css-grid