Question

我在flexbox中使用:target构建了一个标签，在单击时显示.details div。不幸的是.details div非常高，并且在段落的底部有一个巨大的差距。是否有 CSS 中的解决方案来消除这种差距？

p {
  margin: 10px;
}

body {
  display: flex;
  flex-wrap: wrap;
}

.my-wrap {
  // height: 200px;
  width: 90%;
  margin: 50px auto;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: space-between;
  border: 1px solid #eee;
  color: #fff;
}

.wrap-one {
  background-color: tomato;
}

.wrap-two {
  background-color: deepskyblue;
}

.wrap-three {
  background-color: greenyellow;
}

.button{
  text-decoration: none;
  background-color: #333;
  color: #fff;
  padding: 0.5rem 1rem;
  transition: all 0.25s;
  &:hover{
    text-decoration: none;
    color: #333;
    background-color: #fff;
  }
}
.button{
  width: 25%;
  margin-bottom: 0.5rem;
}
.details{
  width: 70%;
  display: none;
  height: 100%;
  order: 1;
}
.one{
  // display: block;
  // order: 1;
}
.two{
  // display: block;
}
.three{
  // display: block;
}


div:target{
  display: block;
}

<div class="my-wrap">
  <a href="#one" class="wrap-button-one button">Wrap One</a>
  <div id="one" class="wrap-one one details">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum voluptates ipsa tempora qui voluptas, dicta corrupti dolorum, iure esse earum ut pariatur, ad possimus facilis consequatur impedit accusantium autem! Nesciunt?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum voluptates ipsa tempora qui voluptas, dicta corrupti dolorum, iure esse earum ut pariatur, ad possimus facilis consequatur impedit accusantium autem! Nesciunt?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum voluptates ipsa tempora qui voluptas, dicta corrupti dolorum, iure esse earum ut pariatur, ad possimus facilis consequatur impedit accusantium autem! Nesciunt?</p>
  </div>
  <a href="#two" class="wrap-button-two button">Wrap Two</a>
  <div id="two" class="wrap-two two details">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat commodi aspernatur et! Voluptates officiis nemo corporis delectus pariatur. Cupiditate perspiciatis illum minima, porro voluptas velit nobis ad eveniet modi explicabo.</p>
  </div>
  <a href="#three" class="wrap-button-three button">Wrap Three</a>
  <div id="three" class="wrap-three three details">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis reprehenderit, necessitatibus vel praesentium dolorum vitae sequi in magni voluptate alias fugit saepe eos sint dolore quae sapiente sunt itaque, cupiditate.</p>
  </div>
</div>

Answer 1

为了将flex项目包装在列方向容器中，您应该docs。这设置了一个明确的断点，告诉项目何时创建新列。

在您的代码中，容器没有高度限制。因此，包装基于内容大小，可能因浏览器而异。详细信息框中额外空格的原因是align-items: stretch，这是一个flex默认值，它告诉项目消耗set a height on the container中的所有可用空间。

您可cross axis使用align-items: flex-start（以及其他值）解决问题，但会产生新问题：Flex项目可能无法再换行。

因此，除非您想重构HTML或使用其他技术，例如 CSS Grid ，否则最好的办法是在容器上设置一个高度，这样可以提供更多的稳定性和控制力。

这是您的布局版本，容器上有max-height：

＆＃13;

p {
  margin: 10px;
}

body {
  display: flex;
  flex-wrap: wrap;
}

.my-wrap {
  max-height: 200px;
  width: 90%;
  margin: 50px auto;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: space-between;
  color: #fff;
}

.wrap-one {
  background-color: tomato;
}

.wrap-two {
  background-color: deepskyblue;
}

.wrap-three {
  background-color: greenyellow;
}

.button {
  text-decoration: none;
  background-color: #333;
  color: #fff;
  padding: 0.5rem 1rem;
  transition: all 0.25s;
  &:hover {
    text-decoration: none;
    color: #333;
    background-color: #fff;
  }
}

.button {
  width: 25%;
  margin-bottom: 0.5rem;
}

.details {
  width: 70%;
  display: none;
  height: 100%;
  order: 1;
}

.one {
  // display: block;
  // order: 1;
}

.two {
  // display: block;
}

.three {
  // display: block;
}

div:target {
  display: block;
}

＆＃13;

<div class="my-wrap">
  <a href="#one" class="wrap-button-one button">Link One</a>
  <div id="one" class="wrap-one one details">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum voluptates ipsa tempora qui voluptas, dicta corrupti dolorum, iure esse earum ut pariatur, ad possimus facilis consequatur impedit accusantium autem! Nesciunt?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum voluptates ipsa tempora qui voluptas, dicta corrupti dolorum, iure esse earum ut pariatur, ad possimus facilis consequatur impedit accusantium autem! Nesciunt?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum voluptates ipsa tempora qui voluptas, dicta corrupti dolorum, iure esse earum ut pariatur, ad possimus facilis consequatur impedit accusantium autem! Nesciunt?</p>
  </div>
  <a href="#two" class="wrap-button-two button">Link Two</a>
  <div id="two" class="wrap-two two details">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat commodi aspernatur et! Voluptates officiis nemo corporis delectus pariatur. Cupiditate perspiciatis illum minima, porro voluptas velit nobis ad eveniet modi explicabo.</p>
  </div>
  <a href="#three" class="wrap-button-three button">Link Three</a>
  <div id="three" class="wrap-three three details">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis reprehenderit, necessitatibus vel praesentium dolorum vitae sequi in magni voluptate alias fugit saepe eos sint dolore quae sapiente sunt itaque, cupiditate.</p>
  </div>
</div>

＆＃13;

这里的布局与CSS网格很好地配合使用：

＆＃13;

.my-wrap {
  display: grid;
  grid-template-columns: 25% 1fr;
  grid-gap: .5rem;
  width: 90%;
  margin: 50px auto;
  color: #fff;
  grid-template-areas: " link-one details "
                       " link-two details "
                       " link-three details "   
                       "    ....     details "
}

.wrap-one {
  background-color: tomato;
}

.wrap-two {
  background-color: blue;
}

.wrap-three {
  background-color: green;
}

.button {
  text-decoration: none;
  background-color: #333;
  color: #fff;
  padding: 0.5rem 1rem;
  transition: all 0.25s;
  }

.button:hover {
    background-color: #000;
}

.details {
  grid-area: details;
  display: none;
}

.wrap-button-one {
  grid-area: link-one;
}

.wrap-button-two {
  grid-area: link-two;
}

.wrap-button-three {
  grid-area: link-three;
}

div:target {
  display: block;
}

p {
  margin: 10px;
}

＆＃13;

<div class="my-wrap">
  <a href="#one" class="wrap-button-one button">Link One</a>
  <div id="one" class="wrap-one one details">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum voluptates ipsa tempora qui voluptas, dicta corrupti dolorum, iure esse earum ut pariatur, ad possimus facilis consequatur impedit accusantium autem! Nesciunt?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum voluptates ipsa tempora qui voluptas, dicta corrupti dolorum, iure esse earum ut pariatur, ad possimus facilis consequatur impedit accusantium autem! Nesciunt?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum voluptates ipsa tempora qui voluptas, dicta corrupti dolorum, iure esse earum ut pariatur, ad possimus facilis consequatur impedit accusantium autem! Nesciunt?</p>
  </div>
  <a href="#two" class="wrap-button-two button">Link Two</a>
  <div id="two" class="wrap-two two details">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat commodi aspernatur et! Voluptates officiis nemo corporis delectus pariatur. Cupiditate perspiciatis illum minima, porro voluptas velit nobis ad eveniet modi explicabo.</p>
  </div>
  <a href="#three" class="wrap-button-three button">Link Three</a>
  <div id="three" class="wrap-three three details">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis reprehenderit, necessitatibus vel praesentium dolorum vitae sequi in magni voluptate alias fugit saepe eos sint dolore quae sapiente sunt itaque, cupiditate.</p>
  </div>
</div>

＆＃13;

disable this feature

Answer 2

（一个小提琴会有所帮助）

但问题几乎肯定是按钮底部的1. Move Maps1.txt fine in `C:\ProgramData\` folder. 2. change your 1st line in program as: std::ifstream openfile("C:\\ProgramData\\Maps1.txt");。

margin

编辑：现在您的问题更加明显，这是一个小提琴。 LinkedIn API guide

（我没有使用你的小提琴代码，因为我更容易从头开始说明我想要做的事。）

问题是，对于flexbox，人们真的需要考虑它们的元素布局。

在您的情况下，因为您需要左侧的按钮和右侧的消息，您需要将它们放在两个并排的Flex容器中。

编辑：您还需要不制作＆＃34;详细信息＆＃34;物品的高度为100％

Answer 3

看起来你只需要删除最后一项下面的边距。

添加：

.three { margin-bottom: 0; }

如何消除flexbox中的空白？

3 个答案: