Question

我的应用中有一个类似于下面的代码段的flexbox布局，一组li个，每个div个<{p}}

.container {
  width: 500px;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}
li {
  border: solid 1px black;
  flex: 1;
}
.title {
  border: solid 1px red;
  margin-bottom: 1em;
}
.content {
  border: solid 1px yellow;
  margin-bottom: 1em;
}
.footer {
  border: solid 1px blue;
}

<div class="container">

  <ul>
    <li>
      <div class="title">
        Blah Blah Blah Blah Blah Blah
      </div>
      <div class="content">
        Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
      </div>
      <div class="footer">
        Some other stuff here
      </div>
    </li>
    <li>
      <div class="title">
        Blah Blah Blah Blah Blah Blah
      </div>
      <div class="content">
        Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
      </div>
      <div class="footer">
        Some other stuff here
      </div>
    </li>
    <li>
      <div class="title">
        Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
      </div>
      <div class="content">
        Blah Blah Blah Blah Blah Blah Blah Blah
      </div>
      <div class="footer">
        Some other stuff here
      </div>
    </li>
  </ul>
</div>

我希望让孩子们在不同时期开始处于同一水平，例如黄色div顶部相等，蓝色div顶部相等。以前我已经通过使子divs绝对定位，然后使它们固定高度，固定顶部完成此操作。但是，这样做，我必须根据他们将包含的文本的猜测最大大小来设置高度，当与响应的页面结合时（有单个断点，它从并排列到旋转木马），这可能会导致列中有很多空白区域。

我发现的大多数示例（因为我显然不知道google的正确术语......）涉及Javascript，或者重新排列标记以使行位于层次结构的顶部，而不是列。我想坚持使用色谱柱，它们可以设置为处理1,2或3列的情况，也可以作为小型设备上的旋转木马。

我错过了如何做到这一点，还是我坚持使用Javascript？

Answer 1

如果您将HTML标记更改为此标记（删除ul li），则可以使用Flexbox执行此操作。您可以在每个项目和flex: 0 0 33%上设置flex-wrap: wrap，这样当flexbox将项目包装到新行时，它将在每行中保持相同的项目高度。然后，您需要使用nth-child()选择器将元素的顺序调整为列。

＆＃13;

* {
  box-sizing: border-box;
}
.container {
  width: 500px;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}
div > div {
  flex: 0 0 33%;
}
div > div:nth-child(3n-2) {
  order: 1;
}
div > div:nth-child(3n-1) {
  order: 2;
}
div > div:nth-child(3n) {
  order: 3;
}
.title {
  border: solid 1px red;
  margin-bottom: 1em;
}
.content {
  border: solid 1px yellow;
  margin-bottom: 1em;
}
.footer {
  border: solid 1px blue;
}

＆＃13;

<div class="container">
  <div class="title">
    Blah Blah Blah Blah Blah Blah
  </div>
  <div class="content">
    Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
  </div>
  <div class="footer">
    Some other stuff here
  </div>

  <div class="title">
    Blah Blah Blah Blah Blah Blah
  </div>
  <div class="content">
    Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
  </div>
  <div class="footer">
    Some other stuff here
  </div>
  <div class="title">
    Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
  </div>
  <div class="content">
    Blah Blah Blah Blah Blah Blah Blah Blah
  </div>
  <div class="footer">
    Some other stuff here
  </div>
</div>

＆＃13;

Answer 2

好问题，您正在寻找display：flex-box。

以下是一些文档：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

我已经了解了您当前的情况，需要指出的一件事是，您将需要同时使用两个伸缩方向（行和列）。另一个可能是，如果您使用边框并尝试使框沿一行对齐，则需要引入box-sizing：border-box（在声明的宽度中包括边框和填充）。我还对列的宽度进行了计算，以使用行中可用的最大空间，以减少猜测工作。

无论如何，希望对您有所帮助，您可以将其应用于您的需求：

	<div class="container">
		<ul>
			<li>
				<div class="title">
					Blah Blah Blah Blah Blah Blah
				</div>
				<div class="content">
					Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
				</div>
				<div class="footer">
					Some other stuff here
				</div>
			</li>
			<li>
				<div class="title">
					Blah Blah Blah Blah Blah Blah
				</div>
				<div class="content">
					Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
				</div>
				<div class="footer">
					Some other stuff here
				</div>
			</li>
			<li>
				<div class="title">
					Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
				</div>
				<div class="content">
					Blah Blah Blah Blah Blah Blah Blah Blah
				</div>
				<div class="footer">
					Some other stuff here
				</div>
			</li>
		</ul>
	</div>

xl_file = pd.ExcelFile(file_name)

dfs = {sheet_name: xl_file.parse(sheet_name) 
      for sheet_name in xl_file.sheet_names}

谢谢杰森。

具有相同高度/对齐顶部的子项的Flexbox列

2 个答案: