css - 使用 CSS3 Flexbox 的两列和一个标题布局

Question

如上图，我需要这样的布局。 DIV1 包含静态文本和来自其他文件 (EX.JSON) 的 DIV2 数据(文本)，因此它是可变的。关键是要根据 heigher div 的高度使两个 div 始终保持相同的高度。

注意:我不希望使用 float。

图片提供:我在网上进行的测试之一。

Answer 1

你好

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

---

解决方案

这是带有工作示例的片段。我使用了 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 的文本多于左侧的情况，您可以编辑与上面相同的代码段 there .

---

知识

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

我最近发现的一个很好的学习工具flexboxfroggy.com .

---

希望对您有所帮助。

干杯