将HTML表格转换为Div

我已经有了一个很好的开始，可以将我的代码表格从表格上传到Div安装程序，但是在这个部分中的某些地方它似乎有问题。这是该网站的外观：http://db.tt/YeUZiiBy。将HTML表格转换为Div

这里是代码和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>`

来源

2013-02-14 David Flynn

你有什么问题？ – zakangelle 2013-02-14 22:56:40

它应该看起来像这个第一个链接：http://db.tt/YeUZiiBy。但它不看起来依然如此。 – 2013-02-14 23:06:28

对于所有圣洁的爱，请修正代码预览！ – 2013-02-14 23:17:10

-1

通过你的代码整洁起来，你就分离成排，然后每一行中使用的div的想法是正确的。

这里有一个我非常迅速地嘲笑了，http://jsfiddle.net/8WKR9/5/第一和第三高度是一样的，第2和第4是一样的，我没有得到任何显示错误，所以可能最好通过你的HTML去& CSS和整理起来，这样你就可以看到每个部分正在做什么，并找出错误的位置，而不是试图找到一个快速修复的方法，它还会使你的代码更清晰，更易于阅读。

<html></html>

来源

2013-02-14 23:57:42 woolm110

标记明智我认为原来的问题是更正确的。我不认为你应该专门针对每一行这样的 – lukek 2013-02-15 00:40:12

如果你看看我的标记，它实际上几乎是相同的，除了我没有使用过的文章，我已经使用了一个包含DIV代替。通过对每一行进行造型，对项目和位置的控制更加强大，因为在这种情况下，有时候会有一个非常简单的布局，我认为从头开始并以干净利索的方式重新编码会更好，这样可以有效地帮助您去除是不需要的，而不是添加它的东西来尝试和修复错误，这只是我个人虽然:) – woolm110 2013-02-15 14:58:42

在一个侧面说明以及你的代码是相同的，除了我已经在ID添加到每行以及每班都有班级造型，但个人身高由身份证控制。 – woolm110 2013-02-15 15:03:43

我觉得你有了正确的想法，但需要一些CSS方面的工作。关键是要清理你的浮标，否则该物品将进入下一个可用的地方。我建议多做一些浮动阅读以及它们如何影响块元素和父元素。

我已经为你做了一个快速的“裸骨”例子，你应该能够适应。在标签IMG

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

<html></html>

来源

2013-02-15 00:52:27 lukek

有关清除和不同技术的更多信息，请阅读http：// stackoverflow。COM /问题/ 211383 /哪些-方法-的-clearfix-是最佳 – lukek 2013-02-15 01:01:41

尝试设置高度

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

来源

2013-02-15 01:38:31 pacmora

您可以使用您的img标签最大宽度和/或最大高度，以确保他们保持率，而不是改造。

来源

2013-02-15 07:01:38 GeNyaa

将HTML表格转换为Div

回答

相关问题