Question

我在HTML中有三个要垂直排列的元素（如果可以的话，可以堆叠），而不考虑大小（某些元素是动态的）。

我已经尝试过使用flexbox和网上的一般建议，但似乎不起作用。

.intro {
  font-family: monospace;
  font-size: 24px;
  color: #455934;
  padding-top: 25px;
  padding-right: 50px;
  padding-bottom: 5px;
  padding-left: 50px;
  align-self: flex-start;
}

.recipe {
  background-color: rgba(255, 255, 255, .6);
  margin: auto;
  min-height: 400px;
  height: auto !important;
  height: 400px;
  width: 75%;
  box-sizing: border-box;
  display: flex;
  display: -ms-flexbox;
  display: -webkit-flex;
  flex-direction: column;
  -webkit-flex-direction: column;
  align-items: flex-start;
  -webkit-align-items: flex-start;
  justify-content: left;
}

.recipe a:link,
a:visited,
a:active {
  color: #cda44c;
  font-family: monospace;
  font-size: 18px;
  padding-top: 5px;
  padding-right: 50px;
  padding-bottom: 5px;
  padding-left: 50px;
  align-self: flex-start;
}

.recipe a:hover {
  color: white;
  align-self: flex-start;
}

.recipe_image {
  padding-top: 5px;
}

<div class="recipe">
  <p class="intro">
    {{label}}
  </p>
  <a href='test.html'>
		Rezept von {{source}}
	</a>
  <br>
  <a href='test.html'>
    <img src='C:/users/fabian.nguyen/03 - Customer Analytics/Bots/Flask Test/static/rock.gif' alt="TEST" class="recipe_image">
  </a>
</div>

您可以在此处查看生成的HTML（通过Flask渲染，但这不是问题）： https://nachhaltig-kochen.herokuapp.com/getrecipe

它们没有排成一列（1.标签2.文本链接3.图像链接），而是排列成相等大小的div行。

编辑：

感谢Pete，解决方案就是删除所有flex box引用，因为元素应该（并且确实）自然地垂直堆叠而无需任何其他样式。

如何使用Flexbox和CSS垂直排列元素

0 个答案: