1

Twitter Bootstrapプロジェクトを使用して、iPhoneアプリの1つにシンプルな（っぽい）Webサイトを作成しています。これを使用して完全なWebサイトを作成し、非常に使いやすいことがわかりましたが、メディアグリッドでいくつかの問題が発生しています。

media-gridクラスを使用して3つの画像の行を達成しようとしています。画像の幅は280ピクセルで、合計で840ピクセルになります。コンテナの幅は940ピクセルなので、パディングなどに100ピクセルの猶予を使用できます。サイトを表示すると、2つの画像が並んで配置され、3番目の画像が次の行に配置されるため、これを行うのは非常に困難です。ただし、いくつかの異常が発生しています。

  • FTP経由でindex.htmlと関連するcssファイルを公開すると、Webサイトは、2つの画像を並べて表示し、次に3番目の画像を最初の行の下の次の行に表示します。
  • 「Coda」（htmlとcssの作成に使用しているMacのエディター）でWebサイトをプレビューすると、3つの画像すべてが1行に並んでいるため、Webサイトも希望どおりに表示されます。

私はいくつかのことを試しました。

  1. CSSで.media-gridスタイルを編集してみましたが、サイトの外観に違いはないようです。大きな余白やパディングがあったとしても、なんらかの理由で変わらないのでしょうか？
  2. 私は自分のIDを3つの画像のメディアグリッドクラスに入れてから、スタイリングしてから自分自身を試してみましたが、これもビジュアルには影響しません。

次のコードを使用して画像を挿入しました。

<div class="container">

  <ul class="media-grid" id="imagearray">
<li>
    <img class="thumbnail" src="img/tweettimemainimage.png" alt="">
</li>
<li>
    <img class="thumbnail" src="img/tweettimemainimage.png" alt="">
</li>
<li>
    <img class="thumbnail" src="img/tweettimemainimage.png" alt="">
</li>
</ul>
</div>

CSSに何かが欠けていますか？私はCSSに精通していないので、何かを見落としている可能性がありますか？どんな助けでもいただければ幸いです。

4

1 に答える 1

2

デフォルトのスタイリングを正しく機能させるには、 を でラップする必要があり<li>ます<a href>。

例えば

<ul class="media-grid" id="imagearray">
<li>
<a href="#"><img class="thumbnail" src="img/tweettimemainimage.png" alt=""></a>
</li>
<li>
<a href="#"><img class="thumbnail" src="img/tweettimemainimage.png" alt=""></a>
</li>
<li>
<a href="#"><img class="thumbnail" src="img/tweettimemainimage.png" alt=""></a>
</li>
</ul>
于 2011-11-28T14:16:19.623 に答える