0

我无法将这两个图像排列在我想要的位置 - 我正在尝试进行网格样式显示，但由于某种原因（尽管使用 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

4

2 回答 2

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/

于 2013-08-21T23:19:41.200 回答
0

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

您能否不使用百分比作为图像标签，而是使用像素。我将 CSS 更改为以下内容，添加浮动，并删除其他 CSS。

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

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

于 2013-08-21T23:11:02.840 回答