為什么我的css類不能被一致地應用？
[英]Why is my css Class not being applied consistently?
問題描述
我是html和CSS的新手，想為我的html代碼應用一個類。 此類標記的目的是使表中的所有圖片都具有正確的大小並正確對齊。 奇怪的是，香蕉和鱷梨的圖片未對齊。 我無法弄清楚自己做錯了什么，因此希望獲得Stack Overflow社區的任何幫助。
我的問題是我該如何在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
3 個解決方案
解決方案1
1 已采納 2016-07-15 01:04:01
我對此進行了測試，並添加了最小寬度/最大高度對其進行了修復。
.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
如果您希望灰色部分覆蓋整個頁面，請在表格上使用填充，以便在整個頁面上使用。
解決方案2
0 2016-07-15 01:51:48
嘗試將寬度添加到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 JD 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>
解決方案3
0 2016-07-15 02:01:22
您剛剛錯過了鱷梨和香蕉的寬度尺寸。 更改兩個相應標簽的寬度即可得到答案。如果要將所有圖像的寬度更改為70％，然后嘗試將所有圖像的寬度更改為100％，這將由於“食物”而將圖像大小更改為70％類
CSS 轉換未始終如一地應用
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.