html - 对齐彼此相邻的图像

Question

我无法将这两张图像排列在我想要的位置 - 我正在尝试进行网格样式显示，但出于某种原因(尽管使用 display: inline)图像出现在不同的行上。

我尝试编辑“图形”元素的宽度(因为我猜这就是问题所在)但它只是缩小了所有内容而不是我想要的 - 谁能帮我解决这个问题？

HTML

<div id="blade" class="tab-content">
  <div id="simpleCart_shelfItem">
    <figure>
      <img src="http://i.imgur.com/abi4hJu.png" class="mini-img" />
      <figcaption class="item_price">$17,000</figcaption>
      <span class="item_name">Gomai Blade</span>
    </figure>
  </div>
  <div id="simpleCart_shelfItem">
    <figure>
      <img src="http://i.imgur.com/IFAtrSy.png" class="mini-img" />
      <figcaption class="item_price">$1,682</figcaption>
      <span class="item_name">Gomai Blade</span>
    </figure>
  </div>
</div>

CSS

.mini-img {
    width: 20%;
    cursor: pointer;
}
.builder {
    height: 20%;
    text-align: center;
    padding-bottom: 10px;
    width: 50%;
}
.builder fieldset {
    border: 1px solid black;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.builder fieldset legend {
    text-align: left;
}
.tab-content {
    margin-top: 10px;
}
.tab-content #simpleCart_shelfItem {
    display: inline;
}
.tab-content #simpleCart_shelfItem .item_name {
    display: none;
}
.tab-content #simpleCart_shelfItem figure {
    width: auto;
}

我试图在每个单独的图像下实现一种“标题”效果，但我仍然希望图像以某种“网格”格式排列 - 我完成了第一部分(显然)但这是第二部分给我带来麻烦的部分。我希望避免使用表格，但我不确定这是否更适合这种情况。

jsFiddle

Answer 1

我不知道你得到的那些疯狂代码是什么，但我会这样做。我知道你可能有所有这些类(class)是有原因的，但你可以考虑简化一下，它会让你的生活更轻松，并让你成为更好的编码员。

HTML:

<div>
  <img src="http://i.imgur.com/abi4hJu.png" class="mini-img" />
  <p>$17 000</p>
</div>

<div>
  <img src="http://i.imgur.com/IFAtrSy.png" class="mini-img" />
  <p>$3500</p>
</div>

CSS:

div {
  float: left;
  margin: 10px;
}

p {
  margin-top: 5px;
}

img {
  width: 200px;
}

http://jsfiddle.net/eshellborn/g2xcr/18/