Question

我是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

Answer 1

我对此进行了测试，并添加了min-width / max-height修复它。

.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

我有它在这里工作，如果你想让灰色部分跨越整个页面，取出表类的填充。

Answer 2

尝试将宽度添加到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>

Answer 3

你刚刚错过了鳄梨和香蕉的宽度尺寸。更改两个相应标签的宽度以获得答案。如果您想将所有图像的宽度设置为70％，请尝试将所有图像的宽度更改为100％，这会因为您的“食物”而将图像大小更改为70％类

为什么我的css Class没有得到一致的应用？

3 个答案: