Question

我遇到这个问题，我希望有多个包含信息的div，但是我无法设置高度对应于文本字段。无论白色窗户的高度是多少。如果我将显示更改为display: inline-flex;以外的其他内容，则不会正确显示我的两个窗口。

编辑：我也想知道如何制作它，以便有两个div堆叠的列。只要我添加第三个，他们每次都会创建一个新列。

如果我能为这两个问题找到解决方案，那就太好了。

提前谢谢。

PS：将代码段展开到整页，以获得准确的结果。

＆＃13;

* {
  margin: 0px;
  padding: 0px;
  font-family: 'Montserrat', sans-serif;
}

body {
  background: hsl(47, 9%, 90%);
}

nav {
  width: 100%;
  position: fixed;
  box-shadow: 1px 10px 40px 0px rgba(0,0,0,0.05);
}

a {
  text-decoration: none;
  color: white;
}


::selection {
  background: wheat;
}

.logo-box {
  font-size: 30px;
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  width: 25%;
  background: #68CC93;
}

.link-box {
  font-size: 30px;
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  width: 25%;
  background: #998D78;
}

.link-box:hover {
  background: hsl(38, 14%, 44%);
}

.text-container {
  width: 98%;
  margin: 0px 1%;
  background: white;
  height: auto;
  box-shadow: 1px 10px 40px 0px rgba(0,0,0,0.10);
}

.main-heading {
  color: hsl(120, 3%, 30%);
  background: wheat;
  font-size: 28px;
  font-weight: 100;
  padding: 10px 10px;
  letter-spacing: 1px;
}

.description {
  padding: 10px;
  color: hsl(120, 3%, 60%);
  float: right;
}

.text-field {
  padding: 10px;
  color: hsl(120, 2%, 20%);
}

#highlight {
  color: #FF9151;
}

.half-screen-text-box {
  display: inline-block;
  width: 48%;
  margin: 0px 1%;
  background: white;
  box-shadow: 1px 10px 40px 0px rgba(0,0,0,0.10);
  height: auto;
}







/* NOTE: Media Queries */

@media only screen and (max-width: 920px) {
  .logo-box, .link-box, .pseudo-nav {
    font-size: 20px;
    height: 60px;
  }
  .main-heading {
    font-size: 20px;
  }
  .description, .text-field {
    font-size: 14px;
  }
}

＆＃13;

<!DOCTYPE html>
<html lang="fr" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond|Montserrat|Slabo+27px" rel="stylesheet">
    <link rel="stylesheet" href="../css/master.css" type="text/css">
    <title>Amandita</title>
  </head>
  <body>
    <nav>
      <div class="logo-box">
        <a>Amandita<sup style="font-size:12px;">FRANCE</sup></a>
      </div><!--
    --><a class="link-box" href="../../main.html">
        ACCUEIL
      </a><!--
  --><a class="link-box" href="./propos.html">
        À PROPOS
      </a><!--
   --><a class="link-box" href="#">
        FAIRE UN DON
      </a>
    </nav><br><br><br><br><br>
    <div style="display: inline-flex; width: auto;">
      <div class="half-screen-text-box">
        <p class="main-heading">COMMENT DONNER</p>
        <p><a class="description" style="float:left;">Thurs. 2 April</a><a class="description">Compte rendu moi de Mars</a><br><br>
        <p class="text-field">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta ac leo sed consectetur. Nunc id magna ac quam ultricies sagittis vel non eros. Quisque ultrices, ipsum ut imperdiet faucibus, ligula leo fringilla urna, et ultricies massa arcu id velit. Quisque feugiat sem ac mauris aliquam rutrum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec volutpat dui quis lectus congue, at lacinia ipsum congue. Integer in iaculis velit. Pellentesque quis turpis nec sapien pellentesque porttitor. Nam sollicitudin efficitur libero, et dictum diam. Aenean a felis consequat, convallis est non, viverra mauris. Etiam gravida felis magna, eget laoreet ante ornare vel. Quisque tincidunt aliquet mi. Donec magna elit, dictum quis dui facilisis, rutrum lacinia lacus. Sed viverra hendrerit posuere. Etiam consectetur tincidunt dictum. Morbi nec orci non velit dictum accumsan sit amet ac eros. Etiam ac sem venenatis, vestibulum lorem ut, placerat nisl. In consequat ultricies condimentum. Suspendisse potenti. Phasellus suscipit rutrum erat, in scelerisque odio rhoncus vel. Quisque facilisis eleifend mollis. In dictum nisi leo, a fringilla nisi finibus vel. Morbi ultricies lacus a faucibus egestas. Sed mollis, mi at maximus sagittis, odio dolor pretium sem, in pretium purus ante non eros. Morbi id.</p>
        </p>
      </div><br>
      <div class="half-screen-text-box">
        <p class="main-heading">CONDITIONS</p>
        <p><a class="description" style="float:left;">Thurs. 2 April</a><a class="description">Compte rendu moi de Mars</a><br><br>
        <p class="text-field">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta ac leo sed consectetur. Nunc id magna ac quam ultricies sagittis vel non eros. Quisque ultrices, ipsum ut imperdiet faucibus, ligula leo fringilla urna, et ultricies massa arcu id velit. Quisque feugiat sem ac mauris aliquam rutrum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec volutpat dui quis lectus congue, at lacinia ipsum congue. Integer in iaculis velit. utrum erat, in scelerisque odio rhoncus vel. Quisque facilisis eleifend mollis. In dictum nisi leo, a fringilla nisi finibus vel. Morbi ultricies lacus a faucibus egestas. Sed mollis, mi at maximus sagittis, odio dolor pretium sem, in pretium purus ante non eros. Morbi id.</p>
        </p>
      </div><br>
    </div>
  </body>
</html>

＆＃13;

Answer 1

您可能会发现align-items有用。

CSS align-items属性定义浏览器如何沿着容器的横轴在flex项之间和之间分配空间。这意味着它的作用就像对齐内容，但是在垂直方向上。

align-items的默认值为stretch 但您可以将其设置为flex-start。

＆＃13;

* {
  margin: 0px;
  padding: 0px;
  font-family: 'Montserrat', sans-serif;
}

body {
  background: hsl(47, 9%, 90%);
}

nav {
  width: 100%;
  position: fixed;
  box-shadow: 1px 10px 40px 0px rgba(0, 0, 0, 0.05);
  display: flex;
}

nav a {
  display: flex;
  justify-content: center;
  align-items: center;
}

a {
  text-decoration: none;
  color: white;
}

::selection {
  background: wheat;
}

.logo-box {
  font-size: 30px;
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  width: 25%;
  background: #68CC93;
}

.link-box {
  font-size: 30px;
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  width: 25%;
  background: #998D78;
}

.link-box:hover {
  background: hsl(38, 14%, 44%);
}

.text-container {
  width: 98%;
  margin: 0px 1%;
  background: white;
  height: auto;
  box-shadow: 1px 10px 40px 0px rgba(0, 0, 0, 0.10);
}

.main-heading {
  color: hsl(120, 3%, 30%);
  background: wheat;
  font-size: 28px;
  font-weight: 100;
  padding: 10px 10px;
  letter-spacing: 1px;
}

.description {
  padding: 10px;
  color: hsl(120, 3%, 60%);
  float: right;
}

.text-field {
  padding: 10px;
  color: hsl(120, 2%, 20%);
}

#highlight {
  color: #FF9151;
}

.half-screen-text-box {
  flex: 0 0 48%;
  margin: 0px 1%;
  background: white;
  box-shadow: 1px 10px 40px 0px rgba(0, 0, 0, 0.10);
  height: auto;
}

#panel_holder {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}


/* NOTE: Media Queries */

@media only screen and (max-width: 920px) {
  .logo-box,
  .link-box,
  .pseudo-nav {
    font-size: 20px;
    height: 60px;
  }
  .main-heading {
    font-size: 20px;
  }
  .description,
  .text-field {
    font-size: 14px;
  }
}

＆＃13;

<nav>
  <div class="logo-box">
    <a>Amandita<sup style="font-size:12px;">FRANCE</sup></a>
  </div>
  <!--
    --><a class="link-box" href="../../main.html">
        ACCUEIL
      </a>
  <!--
  --><a class="link-box" href="./propos.html">
        À PROPOS
      </a>
  <!--
   --><a class="link-box" href="#">
        FAIRE UN DON
      </a>
</nav><br><br><br><br><br>
<div id="panel_holder">
  <div class="half-screen-text-box">
    <p class="main-heading">COMMENT DONNER</p>
    <p><a class="description" style="float:left;">Thurs. 2 April</a><a class="description">Compte rendu moi de Mars</a><br><br>
      <p class="text-field">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta ac leo sed consectetur. Nunc id magna ac quam ultricies sagittis vel non eros. Quisque ultrices, ipsum ut imperdiet faucibus, ligula leo fringilla urna, et ultricies massa arcu
        id velit. Quisque feugiat sem ac mauris aliquam rutrum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec volutpat dui quis lectus congue, at lacinia ipsum congue. Integer in iaculis velit. Pellentesque
        quis turpis nec sapien pellentesque porttitor. Nam sollicitudin efficitur libero, et dictum diam. Aenean a felis consequat, convallis est non, viverra mauris. Etiam gravida felis magna, eget laoreet ante ornare vel. Quisque tincidunt aliquet mi.
        Donec magna elit, dictum quis dui facilisis, rutrum lacinia lacus. Sed viverra hendrerit posuere. Etiam consectetur tincidunt dictum. Morbi nec orci non velit dictum accumsan sit amet ac eros. Etiam ac sem venenatis, vestibulum lorem ut, placerat
        nisl. In consequat ultricies condimentum. Suspendisse potenti. Phasellus suscipit rutrum erat, in scelerisque odio rhoncus vel. Quisque facilisis eleifend mollis. In dictum nisi leo, a fringilla nisi finibus vel. Morbi ultricies lacus a faucibus
        egestas. Sed mollis, mi at maximus sagittis, odio dolor pretium sem, in pretium purus ante non eros. Morbi id.</p>
  </div>
  <div class="half-screen-text-box">
    <p class="main-heading">CONDITIONS</p>
    <p><a class="description" style="float:left;">Thurs. 2 April</a><a class="description">Compte rendu moi de Mars</a><br><br>
      <p class="text-field">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta ac leo sed consectetur. Nunc id magna ac quam ultricies sagittis vel non eros. Quisque ultrices, ipsum ut imperdiet faucibus, ligula leo fringilla urna, et ultricies massa arcu
        id velit. Quisque feugiat sem ac mauris aliquam rutrum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec volutpat dui quis lectus congue, at lacinia ipsum congue. Integer in iaculis velit. utrum
        erat, in scelerisque odio rhoncus vel. Quisque facilisis eleifend mollis. In dictum nisi leo, a fringilla nisi finibus vel. Morbi ultricies lacus a faucibus egestas. Sed mollis, mi at maximus sagittis, odio dolor pretium sem, in pretium purus
        ante non eros. Morbi id.</p>
  </div>
  <div class="half-screen-text-box">
    <p class="main-heading">CONDITIONS</p>
    <p><a class="description" style="float:left;">Thurs. 2 April</a><a class="description">Compte rendu moi de Mars</a><br><br>
      <p class="text-field">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta ac leo sed consectetur. Nunc id magna ac quam ultricies sagittis vel non eros. Quisque ultrices, ipsum ut imperdiet faucibus, ligula leo fringilla urna, et ultricies massa arcu
        id velit. Quisque feugiat sem ac mauris aliquam rutrum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec volutpat dui quis lectus congue, at lacinia ipsum congue. Integer in iaculis velit. utrum
        erat, in scelerisque odio rhoncus vel. Quisque facilisis eleifend mollis. In dictum nisi leo, a fringilla nisi finibus vel. Morbi ultricies lacus a faucibus egestas. Sed mollis, mi at maximus sagittis, odio dolor pretium sem, in pretium purus
        ante non eros. Morbi id.</p>
  </div>
  <div class="half-screen-text-box">
    <p class="main-heading">COMMENT DONNER</p>
    <p><a class="description" style="float:left;">Thurs. 2 April</a><a class="description">Compte rendu moi de Mars</a><br><br>
      <p class="text-field">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta ac leo sed consectetur. Nunc id magna ac quam ultricies sagittis vel non eros. Quisque ultrices, ipsum ut imperdiet faucibus, ligula leo fringilla urna, et ultricies massa arcu
        id velit. Quisque feugiat sem ac mauris aliquam rutrum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec volutpat dui quis lectus congue, at lacinia ipsum congue. Integer in iaculis velit. Pellentesque
        quis turpis nec sapien pellentesque porttitor. Nam sollicitudin efficitur libero, et dictum diam. Aenean a felis consequat, convallis est non, viverra mauris. Etiam gravida felis magna, eget laoreet ante ornare vel. Quisque tincidunt aliquet mi.
        Donec magna elit, dictum quis dui facilisis, rutrum lacinia lacus. Sed viverra hendrerit posuere. Etiam consectetur tincidunt dictum. Morbi nec orci non velit dictum accumsan sit amet ac eros. Etiam ac sem venenatis, vestibulum lorem ut, placerat
        nisl. In consequat ultricies condimentum. Suspendisse potenti. Phasellus suscipit rutrum erat, in scelerisque odio rhoncus vel. Quisque facilisis eleifend mollis. In dictum nisi leo, a fringilla nisi finibus vel. Morbi ultricies lacus a faucibus
        egestas. Sed mollis, mi at maximus sagittis, odio dolor pretium sem, in pretium purus ante non eros. Morbi id.</p>
  </div>
</div>

＆＃13;

我还编辑了nav元素：

nav {
  width: 100%;
  position: fixed;
  box-shadow: 1px 10px 40px 0px rgba(0, 0, 0, 0.05);
  display: flex;
}
nav a {
  display: flex;
  justify-content: center;
  align-items: center;
}

供参考，请参阅CSS-Tricks上的这些文章：

内联Flex问题，白色空间

1 个答案: