我如何在Div中获取物品以垂直堆叠

Question

我试图制作一个模拟的在线商店，无法弄清楚如何用其图像堆叠项目描述。我在网格容器中有所有东西。我可以单独集中每个元素，但是当我尝试将图像堆叠在删除/下拉/下拉按钮上时，它们会在框中创建2个新列。有没有办法将图像放在描述的顶部，然后将两个元素放在下拉菜单和按钮的顶部？

#column_left{
display: grid;
width:100%;
height: 900px;
border: solid 2px black;
grid-template-rows: 33% 33% 33%;
}

#column_right {
    display: grid;
    width:100%;
    height: 900px;
    border: solid 2px black;
}

.item {
    border: solid 2px black;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center; 
}

.sample_img {
    height: 50%;
    width: auto;
}

<div class="item">
    <img class="sample_img" src="https://st2.depositphotos.com/3080513/7014/i/600/depositphotos_70144489-stock-photo-t-shirt-template.jpg">

    <p>Sticks T-shirt</p>
    <label for="size">Choose a Size</label>
    <select name="size" class="size" >
        <option value="XS">XS</option>
        <option value="S">S</option>
        <option value="M">M</option>
        <option value="L">L</option>
        <option value="XL">XL</option>
        <option value="XXL">XXL</option>
    </select>
    <button class="addToCart" type="submit">Add to Cart</button>

</div>

Answer 1

在这种情况下，将其添加到.Item类

flex-direction: column;

中，图片和其余内容将在另一个下方

.item {
    border: solid 2px black;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center; 
    flex-direction: column;
}

Answer 2

您应该能够设置弹性方向。
在这种情况下，您可能不需要使用网格。

flex-direction: row;
flex-direction: column;

是您大多可能选择的两个选项。改变弹性方向将改变证明内容和对齐项目的合理性，从本质上扭转它们。您也可以执行行反向和列反向，如果需要，将其向后进行。

Answer 3

需要使用flex-direction或flex-flow column在这种情况下，在这种情况下，.Item。

#column_left {
  display: grid;
  width: 100%;
  height: 900px;
  border: solid 2px black;
  grid-template-rows: 33% 33% 33%;
}

#column_right {
  display: grid;
  width: 100%;
  height: 900px;
  border: solid 2px black;
}

.item {
  border: solid 2px black;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1em;
}

button {
  margin-bottom: 1em;
}

.sample_img {
  height: 50%;
  width: auto;
  max-width:100%
}

.item>div:first-child {
  text-align: center;
}

<div class="item">
  <div>
    <img class="sample_img" src="https://st2.depositphotos.com/3080513/7014/i/600/depositphotos_70144489-stock-photo-t-shirt-template.jpg">
    <p>Sticks T-shirt</p>
  </div>
  <label for="size">Choose a Size</label>
  <select name="size" class="size">
    <option value="XS">XS</option>
    <option value="S">S</option>
    <option value="M">M</option>
    <option value="L">L</option>
    <option value="XL">XL</option>
    <option value="XXL">XXL</option>
  </select>
  <button class="addToCart" type="submit">Add to Cart</button>
</div>