javascript - 如何将按钮/输入保留在图像下方？

Question

我的想法是有 6 个元素(图片)，下面有按钮可以点击数量 和添加到购物车，但是我的 CSS 不够用。 p>

我有 6 个 div 和一个 controlpic 类。我发现输入和按钮位于右侧，而不是保留在图像下方。

.controlpic{
  overflow: auto; 
}
		

<div class="controlpic">
  <img class="img" src="jsbook1.png">
  <button class "clear">-</button>
  <input>
  <button>+</button>
</div>

Answer 1

这是一个片段供您查看: https://jsfiddle.net/sc3y8z83/

希望对您有所帮助!

HTML

<div class="controlpic">
  <img class="img" src="http://orig09.deviantart.net/b7a4/f/2012/062/d/5/blue_icon_pattern_by_killer_icons-d4rkk2f.jpg">
  <button class="clear">-</button>
  <input type="text">
  <button>+</button>
</div>

CSS

.controlpic{
   overflow: auto;
}
.img{
  display: block;
  width: 52px;
  height: 52px;
  margin-bottom: 10px;
}