Question

我正在制作一个网页，我没有构建但正在修改。我是HTML编码的新手。我的问题是我有一个包含三列和一行的表。每列包含一些文本上的一张或两张图片。出于某种原因，第一列（左列）比其余列低，我无法弄清楚原因。对不起，我不允许发布图片，因此您无法看到我在说什么。我希望我已经很好地描述了这个问题。

以下是代码：

<div id="clear" style="clear:both;"></div>
<div id="cleandraindry" style="z-index:-999;">
    <div id="hidehere" style="float:left;margin:10px 0 0 99px;width:600px;">
         <span style="color:#db6918;font-family:Futura-Bold, Arial, Helvetica, sans-serif;font-size:25px;font-weight:900;text-transform:uppercase;padding-bottom:8px;width:600px;"> 
            Emerald ash borer hides here
         </span>
         <br><br />
         <span style="font-family: Arial, Helvetica, sans-serif;font-size:12px;line-height:16px;width:354px;">The emerald ash borer is not always visible as the adults are small enough to fit on the head of a penny. The larvae burrow under the bark and through the wood, often going unseen until the ash tree begins to die. Because larvae and pupae can survive for long periods even in cut wood, a primary way to ensure that you don't spread emerald ash borers is to not move firewood from areas with a known infestation, particularly across state lines. </span>
     </div><br />
     <div id="clear" style="clear:both;"></div>
     <!-- <div id="boat" style="margin:20px;"> 
         <img src="firewood_stack_900.jpg" style="display:block;margin:auto;"/>
     </div> -->
     <div>
         <table style="display:block;margin:-10px 0 0 69px;">
             <tr>
                 <td style="width:220px;padding:30px;">
                     <img src="EAB&penny_220x148.jpg"; style="margin:0 0 10px 0";/>
                     <br />
                     <img src="adulteab_220.jpg"; style="margin:0 0 5px 0";/>
                     <span style="color:#db6918;font-family:Futura-Bold, Arial, Helvetica, sans-serif;font-size:25px;font-weight:900;text-transform:uppercase;">
                         adults
                     </span><br />
                     <span style="font-family: Arial, Helvetica, sans-serif;font-size:12px;">
                         1/2 inch long and 1/8 inch wide, metallic emerald green in coloration. Can be distinguished from other similar boring beetles by the disinctive reddish top surface of their abdomen (under the wings). Females lay 50-100 eggs in bark crevices. (Photo: David Cappaert [top], Howard Russell, both Bugwood.org)
                     </span>  
                 </td>   
                 <td style="width:220px;padding:30px;">
                     <img src="canopydieback_220.jpg"; style="margin:0 0 10px 0";/>
                     <span style="color:#db6918;font-family:Futura-Bold, Arial, Helvetica, sans-serif;font-size:25px;font-weight:900;text-transform:uppercase;">
                         Canopy
                     </span><br />
                     <span style="font-family: Arial, Helvetica, sans-serif; font-size: 12px">
                         As the emerald ash borer larvae feed, the canopy leaves die from the top down. The feeding larvae also trigger new branches and shoots on trunk and branches. (Photo: Daniel Herms, Bugwood.org)
                     </span>
                 </td>
                 <td style="width:220px;padding:30px;">
                     <img src="feedinggallery_220.jpg"; style="margin:0 0 10px 0"; />
                     <span style="color:#db6918;font-family:Futura-Bold, Arial, Helvetica, sans-serif;font-size:25px;font-weight:900;text-transform:uppercase;">
                         girdling
                     </span><br />
                     <span style="font-family: Arial, Helvetica, sans-serif; font-size: 12px">
                         Larvae burow into the phloem (bark) and sapwood, creating S-shaped galeries under the bark and blocking nutrient flow. This eventually kills the tree. (Photo: James W. Smith, USDA APHIS PPQ, Bugwood.org)
                     </span>
                 </td>
             </tr>
         </table>
     </div>
 </div>

Answer 1

此问题似乎与br行有关：

 <img src="EAB&penny_220x148.jpg" ; style="margin:0 0 10px 0" ;/>
 <br />

即使未显示该图像，<br />也会产生间隙。删除该行，标题应排成一行。我还建议添加样式：vertical-align:top;

style="vertical-align:top;width:220px;padding:30px;"

确保它们在顶部对齐。

此外，为了改进代码，还存在以下问题：

<img src="EAB&penny_220x148.jpg"; style="margin:0 0 10px 0";/>

应该是

<img src="EAB&penny_220x148.jpg" style="margin:0 0 10px 0;" />

*请注意删除的分号和样式分号在引号内移动。大多数图片标签似乎都有这个问题。

无法弄清楚表元素错误定位的原因

1 个答案: