Question

我遇到的问题是仅使元素彼此相邻浮动，因为如果一个元素大于它会产生巨大的空间，并且对于我正在制作的网站来说是非常违反直觉的，因为会频繁添加新内容。

我做了一些研究，发现我应该使用flexbox将项目彼此对齐，因此无论元素有多大，它都永远不会做浮动元素的工作。起初效果很好，但后来我遇到了无法将这些元素彼此相邻的问题。我基本上是在寻找一种使这些div相邻浮动的方法，但是使我已经实现的flexbox命令仍然有效。如果我使用display：Inline，它似乎已经起作用了，但是div是水平的而不是垂直的。我将在下面显示示例代码：

  .container {
  width: 80%;
  margin: 5% 10% 5% 8%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.item {
  width: 29%;
  border: 10px solid #edb809;
  float: left;
  background-color: #ffffff;
  margin-bottom: 5%;
  min-height: 30%;

<div class="container">
  <div class="item" style="margin-left: 2%;">
    <p> test </p>
  </div>
  <div class="item" style="margin-left: 2%;">
    <p> test </p>
  </div>
  <div class="item" style="margin-left: 2%;">
    <p> test </p>
  </div>
</div>
<div class="container">
  <div class="item" style="margin-left: 2%;">
    <p> test </p>
  </div>
  <div class="item" style="margin-left: 2%;">
    <p> test </p>
  </div>
  <div class="item" style="margin-left: 2%;">
    <p> test </p>
  </div>
</div>
<div class="container">
  <div class="item" style="margin-left: 2%;">
    <p> test </p>
  </div>
  <div class="item" style="margin-left: 2%;">
    <p> test </p>
  </div>
  <div class="item" style="margin-left: 2%;">
    <p> test </p>
  </div>
</div>

Answer 1

我意识到您想要从容器彼此水平放置，所以我认为您需要这样的东西：

.wrapper {
  display: flex;
}

.container {
  flex: 1;
  margin: 5% 10% 5% 8%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.item {
  border: 10px solid #edb809;
  background-color: #ffffff;
  margin-bottom: 5%;
  min-height: 30%;
}

<div class="wrapper">
  <div class="container">
    <div class="item" style="margin-left: 2%;">
      <p> test1 </p>
    </div>
    <div class="item" style="margin-left: 2%;">
      <p> test1 </p>
    </div>
    <div class="item" style="margin-left: 2%;">
      <p> test1 </p>
    </div>
  </div>
  <div class="container">
    <div class="item" style="margin-left: 2%;">
      <p> test2 </p>
    </div>
    <div class="item" style="margin-left: 2%;">
      <p> test2 </p>
    </div>
    <div class="item" style="margin-left: 2%;">
      <p> test2 </p>
    </div>
  </div>
  <div class="container">
    <div class="item" style="margin-left: 2%;">
      <p> test3 </p>
    </div>
    <div class="item" style="margin-left: 2%;">
      <p> test </p>
    </div>
    <div class="item" style="margin-left: 2%;">
      <p> test3 </p>
    </div>
  </div>
</div>

将FlexBoxed Divs彼此相邻

1 个答案: