0

これらの 2 つの画像を必要な場所に並べるのに問題があります。グリッド スタイルの表示を行おうとしていますが、何らかの理由で (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;
}

個別の画像ごとに一種の「キャプション」効果を実現しようとしていましたが、画像を一種の「グリッド」形式で並べたいと思っていました-最初の部分は（明らかに）完了しましたが、それは2番目の部分です困った。テーブルの使用を避けたいと思っていましたが、それがこれに適しているかどうかはわかりません。

jsフィドル

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 ではない 2 つの 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/

于 2013-08-21T23:11:02.840 に答える