Question

我试图做一个简单的网站，其设计令人震惊。

此Codepen总结了我想做的事情。我需要编写一个位于普通1200px容器顶部的英雄横幅广告。左侧需要一个400像素宽的容器，该容器与其下方的400像素容器平行。红色容器需要与下面的紫色容器对齐，但右侧需要延伸到末端。

对我来说，使事情变得不可能变得困难的是它需要响应。我尝试了所有可以想到的flex版本，但都没有结果。

如何实现？我只需要使用CSS和HTML，而无需JavaScript。

密码笔链接为https://codepen.io/hundredbillion/pen/jOPRdgr

我的代码在下面


    <div class="text-image-banner">
      <div class="text-flex">
        <div class="text-content">
          <h5>This needs to be 400px wide and the right and left edges must match the right and left edges of the orange bar below for all screen widths</h5>
        </div>
      </div>
      <div class="img-flex">
        <div class="img">
          <p>This needs to stretch all the way to the right, but the left edge of the red bar must match the left edge of the purple bar for all screen widths. An image will go here</p>
        </div>
      </div>  
    </div>
    <div class="container">
      <p class="center">this is a 1200px container</p>
      <div class="flex">
         <p class="four">text container</p>
        <p class="eight">img container</p>
      </div>

    </div>

和我的CSS


    .text-image-banner {
      display: flex;
      margin-left:auto;
      margin-right:auto;
    }

    .text-flex {
      background: blue;
      display:flex;
      justify-content:flex-end;
      flex: 1;
    }
    .text-content{
      background: yellow;
      display:flex;
      width:400px;
    }
    .img-flex{
      background: red;
      flex-basis: 1030px;
    }


    /*---- this is a plain vanilla hero banner ----*/
    .container{
      max-width:1200px;
      margin-left:auto;
      margin-right:auto;
      background:pink;

    }
    .four{
      background:orange;
      text-align:center;
      width:400px;
      height:200px;
    }
    .eight{
      background:purple;
      text-align:center;
      color:white;
      width:800px;
    }
    .flex{
      display:flex;
    }
    .center{
      text-align:center;
    }

Answer 1

因此，事实证明，使用CSS网格模板区域可以使我得到想要的东西。这是一种可能的解决方案。可能会帮助遇到此问题的其他人。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>title</title>
    <style>
      *{
        overflow: hidden;
      }

      .container {
        display: grid;
        grid-template-columns: auto 400px 800px auto;
        grid-template-areas: ". header-text header-image header-image"
                            ". body-text body-image. ";
        background-color: #2B3D41;
      }
      .header-text {
        grid-area: header-text;
        background-color: #F9B9F2;
      }
      .header-image {
        grid-area: header-image;
        background-color: #BCA0BC;
      }
      .body-text {
        grid-area: body-text;
        background-color: #4C5F6B;
      }
      .body-image {
        grid-area: body-image;
        background-color: #83A0A0;
      }
      @media screen and (max-width: 1200px) {
        .container {
          grid-template-columns: 33.3% 66.6%;
          grid-template-areas: "header-text header-image"
                              "body-text body-image";
        }
      }
      @media screen and (max-width: 768px) {
        .container {
          display: block;
        }
      }

    </style>
  </head>
  <body>
    <div class="container">
      <div class="header-text">
        <h5>This needs to be 400px wide and the right and left edges must match the right and left edges of the orange div
          below for all screen widths. </h5>
      </div>
      <div class="header-image">
        <p>This needs to stretch all.An image will go here</p>
      </div>

      <p class="body-text">text container</p>
      <p class="body-image">img container</p>

    </div>

  </body>
</html>

Answer 2

我建议您为此使用CSS网格，而不要使用纯flex。我将提供一个示例

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 400px 1fr;
  grid-template-rows: auto;
  background-color: #fff;
  color: #444;
}

.eight {
  background: purple;
  text-align: center;
  color: white;
  width: 800px;
}

.footer {
  grid-column: span 2;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 10px;
  font-size: 150%;
}

.header,
.footer {
  background-color: #999;
}

<div class="wrapper">
  <div class="box sidebar">left</div>
  <div class="box sidebar">right</div>
  <div class="text-container">Content
    <br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac porta sapien. Maecenas lacus erat, suscipit bibendum bibendum ut, scelerisque vehicula nisl. Integer eget lorem non ex laoreet pellentesque. Aenean pulvinar rhoncus fermentum.
    Nunc sit amet suscipit nibh. Pellentesque ullamcorper neque eget dui iaculis lobortis quis nec diam. Nulla in bibendum enim. Ut elementum nunc risus, bibendum semper turpis ornare eget. In et vulputate mauris. Cras eu velit et ipsum tempor congue
    at sit amet odio. Aenean at urna vitae urna rutrum pretium eu id odio. Curabitur suscipit libero in lobortis finibus. Proin libero nunc, venenatis ultricies dapibus ac, accumsan quis lacus. Pellentesque eleifend velit ac finibus tristique. Praesent
    dapibus, erat dignissim cursus aliquam, dui velit auctor turpis, sed maximus est nisl in eros. Sed et eros in nibh vulputate imperdiet. Phasellus dignissim feugiat odio, et volutpat ante vestibulum non. Cras venenatis urna quis felis lacinia imperdiet.
    Quisque convallis lacus at nulla mollis, quis porttitor arcu scelerisque. Proin neque arcu, rutrum mollis egestas vel, malesuada vitae massa. Cras fringilla, quam ut suscipit lacinia, dolor tortor porta urna, id accumsan dolor dui vel ligula. Donec
    sollicitudin consequat dapibus. Nulla eget fringilla leo. Curabitur a lacus id odio varius mollis eu eget risus. Aliquam mauris mi, pulvinar ut justo ut, accumsan euismod augue. Quisque non faucibus arcu. Proin neque ante, aliquet nec mi vel, fringilla
    cursus nisi. Sed egestas sollicitudin ligula, vel auctor metus dictum vitae. Vivamus eget nisl malesuada, egestas neque placerat, vestibulum nisi. Curabitur aliquam metus sit amet velit vestibulum posuere. Suspendisse augue eros, pulvinar quis ante
    vitae, ultrices placerat dui. Aenean vehicula accumsan arcu id dapibus. Phasellus fermentum massa euismod auctor tristique. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam orci ligula, suscipit a mi in,
    blandit sodales purus. Vivamus a feugiat leo. Cras eu tellus laoreet, luctus erat sit amet, convallis tellus. Vivamus scelerisque purus at nisl convallis pharetra. Nam consectetur, nisl quis interdum porttitor, magna ipsum facilisis quam, ut euismod
    ligula dui sit amet nulla. Donec massa eros, iaculis sed dui pellentesque, fermentum malesuada nulla. In consequat eu ipsum non convallis. Morbi dapibus accumsan risus eu efficitur. Vivamus dolor velit, congue eget felis nec, mollis tincidunt quam.
    Curabitur placerat vestibulum nisl non malesuada. Cras justo purus, molestie pulvinar convallis sed, aliquam at velit. Quisque laoreet semper feugiat. Maecenas varius ut lorem ac feugiat. Nullam interdum metus eu blandit venenatis. Nam condimentum
    pretium ex, a sagittis eros pellentesque vitae. Quisque aliquet euismod orci sed egestas. Nullam porta, lacus vel venenatis feugiat, lectus lectus luctus urna, nec ultrices elit felis in augue. Donec non nisi imperdiet, efficitur nibh quis, imperdiet
    elit. Sed quis fringilla mauris. Proin at enim tempor, posuere quam a, pulvinar justo. Aliquam in mi enim.</div>
  <div class="eight">img container</div>
  <div class="box footer">Full width footer</div>
</div>

Flexbox前端设计要求容器左侧，但右侧拉伸全宽

2 个答案: