为什么我的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.