无法使用对齐内容:在两个div之间创建空间的空格

Question

几个小时以来，我一直在破坏我的大脑，以获得合理的内容:在两个div之间工作的空间(位于另一个div内)。我正在使用flex，并尝试通过弹性包装，不同的位置，但两个div之间的空间没有出现。(使用边界元，因此到处都是类)。

​

.description {
  margin: 100px auto 0 auto;
  width: 80%;
  display: flex;
  position: relative;
  justify-content: space-between;
}

.two-columns {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  min-width: 784px;
}

.two-columns__brief {
  line-height: 1.2;
  font-size: 18px;
  font-weight: normal;
  color: #2f80ed;
  min-width: 175px;
  display: flex;
  position: relative;
}

.two-columns__main-text {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-self: flex-end;
}

.two-columns__paragraph {
  line-height: 34px;
  font-size: 24px;
  font-weight: normal;
  margin: 0;
}

.two-columns__span-accent {
  line-height: 34px;
  font-size: 24px;
  margin: 30px 0;
}

<section class="description">
  <div class="two-columns">
    <div class="two-columns__brief">Brief</div>
    <div class="two-columns__main-text">
      <p class="two-columns__paragraph">Paragraph 1</p>
      <span class="two-columns__span-accent"><b>Conclusion:</b> span</span>
      <p class="two-columns__paragraph">Paragraph 2</p>
    </div>
  </div>
</section>

​

Answer 1

我终于弄明白了到底是怎么回事。我需要在我的类中添加宽度: 80%给我的类=两列__main-文本，并在两列_简短中将最小宽度更改为最大宽度，这样，当我将全文添加到所有文本时。

这间隔就像我想要的一样。感谢每一个想帮忙的人！

Answer 2

首先，justify-content: space-between 不需要在html元素之间创建空间。它平均分配项目，第一项与开始齐平，最后一项与结束齐平。。

因此，只有当容器的宽度大于两个div的总宽度时，才会出现两个div之间的间距。

例如，空间位于全屏模式中。

​

但是，如果我删除min-width，空间就会消失。

​

Answer 3

我给布局添加了一些颜色，这样我们就知道了什么：

红色：背景

带绿色边框的蓝色：您试图放置justify-content:space-between;的div的宽度

橙色边框:您的两个div

​

​

所以，您的代码是正确的，它是完全工作的，但是由于蓝色元素(.two-columns)中的宽度错误，它显示了错误的结果。

您可以保留min-width的原样，但是如果您设置了width: 100%，它将如下所示：

​

你的两个div之间都有一个空格。