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/第一个和第三个高度相同，第二个和第四个相同，我没有收到任何显示错误，所以最好通过你的 HTML & CSS 并整理它，这样您就可以看到每个部分在做什么并找出哪里出了问题，而不是尝试快速修复，它还可以使您的代码更清晰，更易于阅读。

<html></html>
于 2013-02-14T23:57:42.000 回答