时间戳

首页 > 解决方案 > 如何为网站水平堆叠 CSS 元素

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

问题描述

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

这是使用以下代码实现的：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;
    }
}

我的目标是尝试让它看起来像这样的草图： 我希望网页看起来像什么

标签： htmlcsslayoutcss-gridelement

解决方案

这可以简单地使用flexbox. 只需将这两个 div 包裹在另一个 div 中div并提供display: flex给该 div。

推荐阅读