Question

我有一个div循环，其高度取决于其内容。如果上一个div的高度小于旁边div的高度，是否可以自动调整下一个div的页边距？我的结构就是这样。

我有两列，并希望调整test3 div以删除空间。我尝试使用flex，但仍然无法正常工作。这是我的代码

<div style="height:auto;display: flex;flex-wrap: wrap;align-content: flex-start;">
    <div style="width: 400px; height: auto; background:red;align-self: baseline;">
        TEST1
    </div>
    <div style="width: 400px; height: auto; background:red;align-self: baseline;">
        TEST2<br>
        TEST2
    </div>
    <div style="width: 400px; height: auto; background:red;align-self: baseline;">
        TEST3<br>
        TEST3<br>
        TEST3
    </div>
    <div style="width: 400px; height: auto; background:red;align-self: baseline;">
        TEST4<br>
        TEST4<br>
        TEST4<br>
        TEST4
    </div>
</div>

在示例中，我手动添加了div及其内容，但最初是在循环中创建的。请帮我。谢谢

Answer 1

在您的情况下，第3列现在从第2列结束处开始。

您可以使用float吗？在这种情况下，请尝试对第1列和第3列使用float：left，对第2列和第4列请使用float：right。

编辑：尝试这个。注意包装的div中的float:left。

<div style="height:auto; width:800px; float:left">
    <div style="width: 400px; float:left; background:red;">
        TEST1
    </div>
    <div style="width: 400px; float:right; background:yellow;">
        TEST2<br>
        TEST2
    </div>
    <div style="width: 400px; float:left; background:green;">
        TEST3<br>
        TEST3<br>
        TEST3
    </div>
    <div style="width: 400px; float:right; background:blue;">
        TEST4<br>
        TEST4<br>
        TEST4<br>
        TEST4
    </div>
</div>

Answer 2

问题出在align-self上，如果您想要两列，并且您知道每列大约为400px，则将容器div设置为800px，它们将非常适合以下代码

.container {
			width: 800px;
			display: flex;
			flex-wrap: wrap;
			align-content: flex-start;
		}
		
.row {
			width: 400px;
			height: auto;
			background-color: red;
		}

<div class="container">
    <div class="row">
        TEST1
    </div>
    <div class="row">
        TEST2<br>
        TEST2
    </div>
    <div class="row">
        TEST3<br>
        TEST3<br>
        TEST3
    </div>
    <div class="row">
        TEST4<br>
        TEST4<br>
        TEST4<br>
        TEST4
    </div>
</div>

如果您还希望不合并行，请根据需要在CSS行中使用margin。

通过我为您添加的FlexBox教程非常有用，因为您可以看到可以添加到容器或行中的类。

Flex Box Guide

希望对您有帮助！！：）

Answer 3

如果要使用Flexbox，则需要2个子容器：

<div class="mainContainer">
  <div class="testContainer">
    <div> TEST 1 </div>
    <div> TEST 3 <br> TEST 3 <br> TEST 3 </div>
  </div>
  <div class="testContainer">
    <div> TEST 2 <br> TEST 2 </div>
    <div> TEST 4 <br> TEST 4 <br> TEST 4 <br> TEST 4 </div>
  </div>
</div>

<style>
  .mainContainer { display: flex; }
  .testContainer { display:flex; flex-direction: column; }
</style>

在循环中，您只需要一个column变量即可确定数据的目标列：

// JS
var data = [
  [ 1 ],
  [ 2, 2],
  [ 3, 3, 3 ],
  [ 4, 4, 4, 4]
]
var columns = document.querySelectorAll("#container div")
var numColumn = 0;
for (var i = 0; i < data.length; ++i) {
  var column = columns[numColumn];
  var testHTML = "" + (column.innerHTML != '' ? '<br>' : '');
  for (var j = 0; j < data[i].length; ++j) {
    testHTML += "TEST " + (i+1);
    if (j < data[i].length-1) testHTML += "<br>";
  }
  column.innerHTML += testHTML
  numColumn = ++numColumn % 2;
}

/* CSS */
.mainContainer { display: flex;}
.testContainer { display:flex; flex-direction: column; }

<!-- HTML -->
<div class="mainContainer" id="container">
  <div class="testContainer"></div>
  <div class="testContainer"></div>
</div>

自动调整股利边际动态

3 个答案: