0

コード化されたテーブルをテーブルから Div セットアップに切り替えることで良いスタートを切りましたが、この部分のどこかで問題が発生しているようです。サイトは次のようになります: http://db.tt/YeUZiiBy。

コードと CSS リンクは次のとおりです: http://jsfiddle.net/8WKR9/1/。

これが私のHTMLです `

<div id="container">
    <article>
        <div class="item">
            <img src="4-cute-cats.jpg" class="centerImage" width="300" height="300"
            />
            <p class="centerText">They hunt in packs.</p>
        </div>
        <div class="item">
            <img src="cat_sniping.jpg" class="centerImage" width="256" height="192"
            />
            <p class="centerText">Sniper Cat</p>
            </a>
        </div>
        <div class="item">
            <img src="LOL1.jpg" class="centerImage" width="300" height="298" />
            <p class="centerText">Sneaking Cat</p>
        </div>
        <div class="item">
            <img src="hammercat.jpg" class="centerImage" width="300" height="163"
            />
            <p class="centerText">80s Cat</p>
        </div>
    </article>
    <article>
        <div class="item">
            <img src="kittytrap.jpg" class="centerImage" width="200" height=492 />
            <p class="centerText">It's a trap!</p>
        </div>
        <div class="item">
            <img src="chop-cats.jpg" class="centerImage" width="300" height="140"
            />
            <p class="centerText">They can strip a car to the frame in under 2:00 minutes.</p>
        </div>
        <div class="item">
            <img src="smartkat.jpg" class="centerImage" width="200" height="338" />
            <p class="centerText">Intelligent cat.</p>
            </a>
        </div>
        <div class="item">
            <img src="narniacat.jpg" class="centerImage" width="200" height="337"
            />
            <p class="centerText">Once a cat of Narnia always a cat of Narnia.</p>
        </div>
    </article>
    <article>
        <div class="item">
            <img src="lolcats3.jpg" class="centerImage" width="300" height="108" />
            <p class="centerText">Tired cat.</p>
        </div>
        <div class="item">
            <img src="lol_cats_1.jpg" class="centerImage" width="300" height="142"
            />
            <p class="centerText">Gollum Cat.</p>
        </div>
        <div class="item">
            <img src="Magical-Kitty.png" class="centerImage" width="300" height="180"
            />
            <p class="centerText">Super Cat.</p>
        </div>
        <div class="item">
            <img src="sad-kitty.jpg" class="centerImage" width="300" height="188"
            />
            <p class="centerText">Sad Kitty.</p>
        </div>
    </article>
    <article>
        <div class="item">
            <img src="cat-in-your-wallpaper.jpg" class="centerImage" width="300" height="200"
            />
            <p class="centerText">Wallpaper cat.</div>
        <div class="item">
            <img src="thinking-cat.jpg" class="centerImage" width="300" height="475"
            />
            <p class="centerText">Thinking cat.</p>
        </div>
        <div class="item">
            <img src="http://3.bp.blogspot.com/_znuneBeHigk/TSOOr5DuoQI/AAAAAAAABFY/-Rpe8S1uRo8/s1600/000.jpg&w=823&h=618&ei=_A4VUfP7L4Gy2QXJ-oHIDQ&zoom=1&ved=1t:3588,r:79,s:0,i:354&iact=rc&dur=2621&sig=108293906633680688065&page=3&tbnh=172&tbnw=231&start=67&ndsp=38&tx=64&ty=72"
            class="centerImage" width="300" height="225" />
            <p class="centerText">Gamer Kitty.</p>
        </div>
        <div class="item">
            <img src="http://www.dumpaday.com/wp-content/uploads/2013/01/funny-lol-cats-playing-with-toilet-paper1.jpg"
            class="centerImage" width="300" height="504" />
            <p class="centerText">Couch cat.</p>
        </div>
    </article>
    </article>
    <article>
        <div class="item">  <a href="morekitties.html">More Kitties</a>

        </div>
    </article>
</div>`
4

4 に答える 4

1

あなたはマークアップに関して正しい考えを持っていたと思いますが、CSS側でいくつかの作業が必要でした。重要なのはフロートをクリアすることです。そうしないと、アイテムは次に利用可能な場所に移動します。フローティングと、それらがブロック要素と親要素にどのように影響するかについて、もう少し読んでみることをお勧めします。

私はあなたのためにあなたが適応できるはずの簡単な「裸の骨」の例をしました。

http://jsfiddle.net/ZbfXU/2/

<html></html>
于 2013-02-15T00:52:27.943 に答える
1

タグimgで高さを設定してみてください

.item > img {
width: 100%;
height: 100%;    
}
于 2013-02-15T01:38:31.103 に答える
0

img タグで max-width および/または max-height を使用して、変換ではなく比率を維持することができます。

于 2013-02-15T07:01:38.827 に答える
-1

コードを調べて整理すると、行に分割してから各行内で div を使用するという正しい考えが得られます。

これは私がすぐにモックアップしたものです。http://jsfiddle.net/8WKR9/5/ 1番目と3番目の高さは同じで、2番目と4番目は同じです。表示エラーが発生していないので、おそらくHTMLを確認するのが最善です& CSS とそれを整理することで、各部分が何をしているかを確認し、どこで問題が発生しているかを突き止めることができます。簡単な修正を試みるのではなく、コードがよりクリーンで読みやすくなります。

<html></html>
于 2013-02-14T23:57:42.000 に答える