將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

回答

相關問題