Question

我已经有了一个良好的开端，可以将我的编码表从一个表格转换为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>`

Answer 1

我认为你对标记有正确的想法，但需要在CSS方面做一些工作。关键是要清除浮子，否则物品将转到下一个可用的地方。我建议更多地阅读浮动以及它们如何影响块元素和父元素。

我为你做了一个快速的'骨头'示例，你应该能够适应。

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

<html></html>

Answer 2

尝试在标签img中设置高度

.item > img {
width: 100%;
height: 100%;    
}

Answer 3

你可以在你的img标签上使用max-width和/或max-height来确保它们保持比例而不是转换。

Answer 4

浏览你的代码并整理它，你有正确的想法分成行然后在每行中使用div。

这是我很快嘲笑的一个，http://jsfiddle.net/8WKR9/5/第一和第三高度是相同的，第二和第四高度是相同的，我没有得到任何显示错误，所以可能最好通过你的HTML＆amp; CSS和整理它，这样你就可以看到每个部分正在做什么，并找出它出错的地方，而不是尝试找到快速修复，它还会使你的代码更清晰，更容易阅读。

<html></html>

将HTML表格转换为Divs

4 个答案: