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

2024-05-21 • 问答

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

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

Concurrency::simple_partitioner splitter(100/8);
Concurrency::parallel_for<int>(0,100,1,[&](int k) {
//a lot of logic depends on the input
},splitter);

CSS：

<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>

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

这可以简单地使用 type StructA struct { Key string `json:"key"` Value string `json:"value"` } type StructB struct { Value string `json:"value"` Key string `json:"key"` } func main() { test := []interface{}{ StructA{Key: "test",Value: "wep"},StructB{Value: "wep",Key: "test"},} bytes,_ := json.Marshal(test) fmt.Print(string(bytes)) } 来实现。只需将这两个 div 包裹在另一个 flexbox 中，然后将 div 赋予该 div。

使用网格作为主布局的想法很好，即使文本太长也会保持恒定的宽度，但是您还在左侧框中放置了一个网格，这不是您的布局所需的图像显示。您还为网格提供了 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 元素

ainichong 回答：如何为网站水平堆叠 CSS 元素

大家都在问