具有 CSS3 Flexbox 的具有一个标题布局的两列

Question

就像上图一样，我需要这样的布局。 DIV1 包含静态文本和来自其他文件（EX.JSON）的 DIV2 数据（文本），因此它是可变的。关键是要使两个 div 始终具有基于更高 div 的高度的相同高度。

注意：我不希望使用 float。

图片礼貌：我在网上进行的测试之一。

Answer 1

嗨

您可以按照您的要求使用 CSS3 Flexbox 轻松做到这一点。

---

解决方案

这是带有工作示例的 sn-p。我在代码中使用了您在 cmets 中的 Flexbox 和细节。

#main {
  /*Styles for sample presentation*/
  padding: 20px;
  border: 1px solid tomato;
}

#wrapper {
  display: flex;
  flex-flow: row wrap;
  /* The remaining place (horizontaly) will be spread out around divs in wrapper. */
  justify-content: space-around;
  
  /*Styles for sample presentation*/
  border: 1px solid royalblue;
}

#wrapper>header {
  /* To keep header 100% width. */
  flex: 0 0 100%;
  text-align: center;
  
  /*Styles for sample presentation*/
  background-color: sandybrown;
}

#wrapper>div {
  margin: 10px;
  padding: 20px;
  /* To center the text vertically. */
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  
  /*Styles for sample presentation*/
  border: 1px solid maroon;
  text-align: justify;
}

#text-static {
  /*Low flex basis values to keep it next to each other divs*/
  flex: 1 0 30%;
}

#wrapper>div#text-json {
  /*Low flex basis values to keep it next to each other divs*/
  flex: 0 0 25%;
  margin-left: 0;
}

<div id="main">
  <div id="wrapper">
    <header>
      Sample header
    </header>
    <div id="text-static">
      Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki. Pięć wieków później zaczął być używany przemyśle elektronicznym,
      pozostając praktycznie niezmienionym. Spopularyzował się w latach 60. XX w. wraz z publikacją arkuszy Letrasetu, zawierających fragmenty Lorem Ipsum, a ostatnio z zawierającym różne wersje Lorem Ipsum oprogramowaniem przeznaczonym do realizacji
      druków na komputerach osobistych, jak Aldus PageMaker
    </div>
    <div id="text-json">
      a Lorem Ipsum a Lorem Ipsum a Lorem Ipsum
    </div>
  </div>
</div>

如果您想尝试右 div 的文本比左 div 多的情况，您可以编辑与上面相同的 sn-p there。

---

知识

您拥有的有关 CSS3 Flexbox 的更多信息，例如在this W3Schools 网站上。

最近发现的一个不错的学习工具flexboxfroggy.com。

---

希望对您有所帮助。

干杯

Answer 2

这是我使用 CSS Grid 的实现，在我看来，这让这变得容易多了，尤其是在使用布局时。我正在使用 SASS 进行样式设置。我希望这有帮助。这是codepen.iosn-p 的链接

HTML 代码

<div class="main-div">
  <div class="wrapper-div">
    <div class="sample-header">Header</div>
    <div class="div1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta blanditiis, error dolorem, velit tempora, magni ea officiis itaque voluptates aliquid consectetur deserunt quisquam tenetur dolor! Labore assumenda iusto debitis autem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, velit cumque quaerat optio vero sed dolores maxime dolorum aut itaque? Asperiores, esse. Nihil dignissimos nisi debitis molestiae facilis accusamus non! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Architecto quisquam corrupti error nesciunt pariatur quidem, voluptates similique obcaecati magni aperiam autem aliquam ex, ducimus, distinctio amet labore vel blanditiis sapiente. </div>
    <div class="div2">Little bit of text here </div>
  </div>
</div>

使用 CSS 网格的 CSS 样式

.main-div{

  border:1px solid #000;
  width:500px;
  margin:0 auto;
  padding:10px;

   .wrapper-div{
      display: grid;
      grid-gap: 10px;
      grid-template-columns: 3fr 1fr;
      background-color: #fff;
     // align-items:center;
      color: #444;
     margin:10px 0;

    .sample-header {
        grid-column: 1 / 3;
        grid-row: 1;
        background-color:lightgrey;
        padding:10px;
        text-align:center;
     }

     .div1,.div2{
       border:1px solid #000;
       padding:10px;
       display:grid;
       align-items:center;
     }

    .div1 {
        grid-column: 1 ;
        grid-row: 2 ;
    }

    .div2 {
        grid-column: 2;
        grid-row: 2;

    }
  }
}

Answer 3

https://codepen.io/anon/pen/OQZNgX

在 Div 1 和 Div 2 的容器上应用此 CSS

display: flex;
justify-content: center;

然后在子 div 上，使用 flex-basis 指定它们的宽度

flex-basis: 75%;
/* and / or */
flex-basis: 25%;

查看上面的代码笔链接以获得工作演示！

Answer 4

您可以使用引导程序来实现这一点...您可以在下面查看此类设计的代码。

<div class='container'>
     <div class='col-md-12 customHeaderclass'>
              Your header
     </div>
     <div class='row'>
              <div class='col-md-8'>
                     Your big content
              </div>
              <div class='col-md-4'>
                     Your small content
              </div>
     </div>
</div>

我希望这段代码对你有帮助 谢谢和问候。