Question

所以我正在尝试创建一个其中包含多个div的flexbox。 div有一个图像和一个应该堆叠的按钮，但是我希望它们对齐。我似乎无法让他们实际进入一排，而是将它们堆叠在一起。这是HTML和CSS：

.block2 {
  display: flex;
  flex-direction: row;
}

.tan {
  background: #FFEFD5
}

.kite1 img {
  height: 150px;
  width: 130px;
  padding: 30px;
}

.kite1button img {
  height: 50px;
  width: 125px;
}

.kite2 img {
  height: 150px;
  width: 130px;
  padding: 30px;
}

.kite2button img {
  height: 50px;
  width: 125px;
}

<div class="block2 tan">
  <div class="kite1">
    <img src="kite1.png" />
    <div class="kite1button">
      <img src="deltasbutton.png" />
    </div>
  </div>
  <div class="kite2">
    <img src="diamond-kite.png" />
    <div class="kite2button">
      <img src="diamondsbutton.png" />
    </div>
  </div>
  <div class="kite3">
    <img src="specialty-kite.png" />
    <div class="kite3button">
      <img src="specialty-button.png" />
    </div>
  </div>
</div>

Answer 1

将kite1，kite2和kite3更改为kite。

然后像这样对kite类进行样式设置：

.kite {
  display: flex;
  flex-direction: column;
}

P.S。如果您要一次使用标识符（即class=或id=或data-whatever=等），请使用id。如果计划在多个元素上使用标识符，请始终使用class。 id仅可用于一个元素，而class可用于无限多个元素。

.block2 {
  display: flex;
}

.kite {
  display: flex;
  flex-direction: column;
}

<div class="block2 tan" >
  <div class="kite">
    <img src="kite1.png" />
    <div class="kite1button">
      <img src="deltasbutton.png"/>
    </div>
  </div>
  <div class="kite">
    <img src="diamond-kite.png"/>
    <div class="kite2button" >
      <img src="diamondsbutton.png"/>
    </div>
  </div>
  <div class="kite">
    <img src="specialty-kite.png"/>
    <div class="kite3button">
      <img src="specialty-button.png"/>
    </div>
  </div>
</div>

Flex Box Divs堆叠而不是水平堆叠

1 个答案: