爲什麼我的css類沒有被一致地應用？

我是新來的HTML和CSS，並希望申請一個類爲我的HTML代碼。這個類標記的目的是爲了讓我的表中的所有圖片都是正確的大小和正確對齊。奇怪的是，香蕉和鱷梨圖片沒有對齊。我無法弄清楚我做錯了什麼，以及來自Stack Overflow社區的任何幫助將不勝感激。爲什麼我的css類沒有被一致地應用？

我的問題是我在CSS代碼中做了什麼以使我的圖像全部達到70％的寬度？或者我在HTML代碼中修復了什麼，以便CSS部分可以正常工作。

.food { 
    vertical-align: top; 
    width: 70%; 
    margin: auto; 
    display: block; 
}

CSS以上代碼
下面的HTML代碼

<h3>Favorite Fruits</h3> 
    <table class="table"> 
    <tr> 
    <td> Strawberries 
     <p><img class="food" src= "http://cdn-media-2.lifehack.org/wp-content/files/2015/05/02.jpg" width="20%"/></p> 
    </td> 
    <td> Bananas 
    <p><img class = "food" src= "http://www.md-health.com/images/1HT03553/Banana21.jpg"width="50%"/></p> 
    </td> 
    <td> Blueberries 
    <p><img class="food" src= "http://www.blueberrycouncil.org/wp-content/uploads/Basket-of-blueberries.jpg"width="20%"/></p> 
    </td> 
    </tr> 
    <tr> 
    <td> Pineapples 
    <p><img class="food" src= "http://www.lapanday.com/images/jpg/pines/sliced%20pineappleb.jpg"width="20%"/></p> 
    </td> 
    <td> Avocados 
    <p><img class="food" src= "http://www.medicalnewstoday.com/content/images/articles/295/295427/avocado.jpg"width="75%"/></p> 
    </td> 
    </tr> 
    </table>

這是鏈接在它的整個來龍去脈我的HTML代碼，如果是需要：http://codepen.io/biniyam18/pen/zBPjgQ?editors=1100

來源

2016-07-15 Biniyam Asnake

我對你試圖最終完成的事感到困惑。你是否想知道如何調整所有圖像的大小，使它們都具有相同的像素尺寸？ – btrballin

嘗試擺脫內聯寬度屬性，因爲它們優先考慮CSS –

我測試了這一點，並添加最小寬度/最大高度固定它。

.food { 
    vertical-align: top; 
    width: 70%; 
    margin: auto; 
    display: block; 
    min-width: 515px; 
    max-height: 292px; 
} 

.table { 
    background-color: #95E7F0 ; 
    border-style: ridge; 
    border-color: #2F6CED; 
    border-width: 4.5px; 
    width: 100%; 
    padding: .5em; 
}

試試這個：

http://codepen.io/jsanatar/pen/pbpwyz

我有工作在這裏，如果你想在灰色部分跨越整個頁面，取出填充對錶類。

來源

2016-07-15 01:04:01

嘗試將寬度添加到td。

td, th { 
    width:30%; 
}

body { 
 
    background-color: #ECEAE0; 
 
} 
 

 
h1 { 
 
    text-align: center; 
 
    color: blue; 
 
} 
 

 
h3 { 
 
    text-align: center; 
 
} 
 

 
.bookpictures { 
 
    margin: auto; 
 
    display: block; 
 
    float: right; 
 
} 
 

 
.table { 
 
    background-color: #95E7F0; 
 
    border-style: ridge; 
 
    border-color: #2F6CED; 
 
    border-width: 4.5px; 
 
    width:100%; 
 
} 
 

 
.food { 
 
    vertical-align: top; 
 
    width: 70%; 
 
    margin: auto; 
 
    display: block; 
 
} 
 

 
td, th { 
 
    width:30%; 
 
}

<html> 
 
    <head> 
 
    <title>Things I Like</title> 
 
     <style> 
 
     td{ 
 
     vertical-align: top 
 
     } 
 
    </style> 
 
    </head> 
 
    <body> 
 
    <h1>BINIYAM ASNAKE</h1> 
 
    <h3>Favorite Books</h3> 
 
    <ol><em> 
 
    <li>Lysistrata by Aristophanes</li> 
 
     <img class="bookpictures" src= "https://dykiegirl.files.wordpress.com/2015/08/lysistrata.png" width="20%"/> 
 
    <li>The Millionaire Mind by Thomas J. Stanley</li> 
 
    <li>The Art of the Deal by Donald J. Trump</li> 
 
    <li>Oedipus Rex by Sophocles</li> 
 
    <li>The Catcher in the Rye by J.D Salinger 
 
    <p><img class="bookpictures" src= "http://vignette2.wikia.nocookie.net/catcher-in-the-rye-mike-and-will/images/8/86/Catcher-in-the-rye-2.jpg/revision/latest?cb=20150109020831"width="15%"/></p> 
 
    </li> 
 
    </ol></em> 
 
    <h3>Favorite Fruits</h3> 
 
    <table class="table"> 
 
    <tr> 
 
    <td> Strawberries 
 
     <p><img class="food" src= "http://cdn-media-2.lifehack.org/wp-content/files/2015/05/02.jpg" width="20%"/></p> 
 
    </td> 
 
    <td> Bananas 
 
    <p><img class = "food" src= "http://www.md-health.com/images/1HT03553/Banana21.jpg"width="50%"/></p> 
 
    </td> 
 
    <td> Blueberries 
 
    <p><img class="food" src= "http://www.blueberrycouncil.org/wp-content/uploads/Basket-of-blueberries.jpg"width="20%"/></p> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> Pineapples 
 
    <p><img class="food" src= "http://www.lapanday.com/images/jpg/pines/sliced%20pineappleb.jpg"width="20%"/></p> 
 
    </td> 
 
    <td> Avocados 
 
    <p><img class="food" src= "http://www.medicalnewstoday.com/content/images/articles/295/295427/avocado.jpg"width="75%"/></p> 
 
    </td> 
 
    </tr> 
 
    </table> 
 
<h3> Sports I Like To Play</h3> 
 
    <h5>-All Orginal Pictures</h5> 
 
    <table> 
 
    <tr> 
 
     <td> 
 
     <ul><li>Soccer</li></ul> 
 
     <img src= https://photos-2.dropbox.com/t/2/AAApYv6cymI83AOK17hx5hTP04XN-Bhn4WTLmyBJiOtKHw/12/583885615/jpeg/32x32/1/_/1/2/IMG_9632.JPG/EO62u9kEGAcgAigC/FN-wfMtkhX2hcCQjaH3JoDGsowBSenaaQm798B0iDec?dl=0&size=2048x1536&size_mode=3 width="45%"/> 
 
     </td> 
 
     <td> 
 
     <ul><li>Hiking</li></ul> 
 
     <img src= "https://photos-2.dropbox.com/t/2/AAAbRyW-YYHwX8dO7w8SKj60HJ-hrEMZXPns_R4iHUVUOQ/12/583885615/jpeg/32x32/1/_/1/2/IMG_7606.JPG/EO62u9kEGAcgAigC/LKTvxXYyxQYLIs1hM4kgvUBxRyT2f4FEmlr2dQSJ4Ko?dl=0&size=2048x1536&size_mode=3"width="25%"/> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <ul><li>Volleyball</li></ul> 
 
     <img src="https://photos-3.dropbox.com/t/2/AAD_za0XYOXIalkeLRO11YmyiUUT573qsw1ZLPO6QWvocw/12/583885615/jpeg/32x32/1/_/1/2/Volleyball.jpg/EO62u9kEGAggAigC/qTg_mqtUX6tYAVbj80G7vpWx0kz36UhRf-_U1Enn28c%2C0evA90YUBklbgPBGFLshizwb5xGwBWMtguCUX6THNVc?dl=0&size=2048x1536&size_mode=3" width="50%"/> 
 
     </td> 
 
     <td> 
 
     <ul><li>Basketball</li></ul> 
 
     <img src= "https://photos-6.dropbox.com/t/2/AABx2XzBoI3I-l__-ME_JmQHOnn6Vv7vu6vuuKlLiF6CHQ/12/583885615/jpeg/32x32/1/_/1/2/Basketball.jpg/EO62u9kEGBMgAigC/bsjN_0sGYxO1aK8I90n_pHgMBTpBu5m9_F81jdGtQdI%2C9bfhKULb-lU_y1yjELqB5mb_oqZljdCy9CduAl4p3Qs?dl=0&size=2048x1536&size_mode=3" width = 50%"/> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
    <h3> Classes I'd Like to Take in College</h3> 
 
    <ul><em> 
 
    <li>Leading Entrepreneurial Ventures </li> 
 
    <img src= "http://neatoday.org/wp-content/uploads/2012/09/college-student-in-a-classroom-e1444221948397.jpg"width="25%"/> 
 
    <li>Mao’s China: Revolutionary Leadership and Its Consqequences</li> 
 
    <li>Philanthropy, Voluntarism, and Nonprofits: Law, Public Policy and Leadership</li> 
 
    <li>Inequality, Politics, and Public Policy: Class, Race, and Gender</li> 
 
    <li>Speech and Debate</li> 
 
    </ul></em> 
 
    <h3> Places I've Visited</h3> 
 
    <ul><em> 
 
    <li>Bangkok, Thailand (including the beautiful islands of Ko Samui, Ko Tao & Ko Pha Ngan)</li> 
 
    <img src= "https://cdn.kiwicollection.com/media/property/PR007321/xl/007321-01-aerial-island-view-daytime.jpg"width="35%"/> 
 
    <li>Addis Ababa, Ethiopia</li> 
 
     <img src= "http://africanarguments.org/wp-content/uploads/2015/08/Addis-Ababa-Bole-e1438697121290.jpeg"width="35%"/> 
 
    <li>Charlottesville, Virgina</li> 
 
     <img src= "https://photos-3.dropbox.com/t/2/AAAW1q3ijU18S5eb_p_i4k_rs3D5gSVPzP46HR5eGx2pXw/12/583885615/jpeg/256x256/1/_/1/2/office-page-charlottesville.jpg/EO62u9kEGAMgAigC/4Wb2uANGyY_P22ps8CCxFwegrSXESXB7J7eZ1Y2r5zg?size_mode=3&size=2048x1536"width="30%"/> 
 
    <li>Silver Springs, Maryland</li> 
 
     <img src= "http://www.downtownsilverspring.com/system/site_images/photos/000/000/213/original/StreetScape.jpg?1368736499"width="35%"/> 
 
    <li>Lake Tahoe, California</li> 
 
     <img src= "https://photos-5.dropbox.com/t/2/AADTSKA_akb1FAE1Y44DmtM3ZV7nxHXxM1fyGIA8AcUqjw/12/583885615/jpeg/32x32/1/_/1/2/Emerald_Bay.jpg/EO62u9kEGAQgAigC/2qtQfYhy1dwqfBVn8UuUVZv0BUqtGvIJYvyU0xNcZgo%2Cr_ng7n16zs5NN9_I-F6DnMCGNgGXxdjJIapIxYIrLM8%2CYl4XRnwyj6JPCRT-K4xbgjL-AUmgJqtXjGLqEyMjb_M?dl=0&size=2048x1536&size_mode=3"width="35%"/> 
 
    </ul></em> 
 
    </body> 
 
</html>

來源

2016-07-15 01:51:48 Eric5528

你剛纔錯過了你的寬度尺寸鱷梨和香蕉。更改兩個相應標籤的寬度以獲得答案。如果要將所有圖像的寬度設置爲70％，則嘗試將所有圖像的寬度更改爲100％，這會將圖像尺寸更改爲70％，因爲您的「食物「class

來源

2016-07-15 02:01:22 uttejh

爲什麼我的css類沒有被一致地應用？

回答

相關問題