Question

我无法将这两个图像排列在我想要的位置 - 我正在尝试进行网格样式显示，但出于某种原因（尽管使用显示：内联），图像显示在单独的行上。 / p>

我尝试编辑“数字”元素的宽度（因为我猜这就是问题所在）但它只是缩小了所有内容而不是我想要的东西 - 任何人都可以帮助我吗？

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

我不知道你所拥有的所有疯狂代码是什么，但这就是我要做的。我知道你可能有所有这些课程是有原因的，但你能考虑简化，它会让你的生活更轻松，并让你成为一个更好的程序员。

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/

Answer 2

您对两个无效HTML的DIV使用相同的ID。

您可以代替使用图像标记的百分比来代替使用像素吗？我将CSS更改为以下内容，添加了float，并删除了其他CSS。

.mini-img {
    width: 100px;
    cursor: pointer;
}
.tab-content {
    margin-top: 10px;
}
div.simpleCart_shelfItem { 
    float: left; 
}

JSFiddle示例： http://jsfiddle.net/g2xcr/1/

将图像彼此对齐

2 个答案: