这是我的jsfiddle链接：http://jsfiddle.net/3om4yjpa/
底部列的三个图像没有正确对齐。
我需要这样的东西http://s11.postimg.org/pzq7m2glv/Untitled_1_copy.png
HTML：
<td class="mcnCaptionBottomImageContent" style="padding:0 9px 9px 9px;" align="left" valign="top">
<img alt="" src="https://gallery.mailchimp.com/74b6bdda18d16b31a24e81ec6/images/e6686072-3933-4150-b034-eef1599bc277.jpg" style="max-width:186px;" class="mcnImage" width="164">
</td>
我必须只编辑内联css，有人可以帮我解决这个问题吗？
提前致谢。
答案 0 :(得分：1)
如果表已修复，您可以为表提供高度，因为表格无法使用min-height。
.mcnCaptionBlock
{
height: 350px;
}
并删除span margin-left:10px。
span{
margin-left: 0 !important;
}
检查更新的Fiddle.
答案 1 :(得分：0)
更新后的代码如下：我已经对内联进行了一些css更改。希望对你有所帮助。
屏幕截图链接：https://www.dropbox.com/s/4h00ci5igdxtcf4/updatedResult.png?dl=0
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateColumns">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="600" class="templateContainer">
<tr>
<td align="left" valign="top" class="columnsContainer" width="33%">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="templateColumn">
<tr>
<td valign="top" class="leftColumnContainer"><table class="mcnCaptionBlock" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody class="mcnCaptionBlockOuter">
<tr>
<td class="mcnCaptionBlockInner" style="padding:9px;" valign="top">
<table style="border-right:1px solid #434343;" class="mcnCaptionBottomContent" align="left" cellpadding="0" cellspacing="0" width="false">
<tbody>
<tr>
<td class="mcnTextContent" style="font-family: Arial,"Helvetica Neue",Helvetica,sans-serif; font-size: 16px;" valign="top" width="164">
<span style="color:#fff;font-size: 16px;font-family: arial;">Leaky Barn Roofs</span>
</td>
</tr>
<tr>
<td class="mcnCaptionBottomImageContent" style="padding:10px 9px 9px 1px;" align="left" valign="top">
<img alt="" src="https://gallery.mailchimp.com/74b6bdda18d16b31a24e81ec6/images/06c313ab-701e-4821-8e83-de852f0d901a.jpg" style="max-width:128px;" class="mcnImage" width="128">
</td>
</tr>
<tr>
<td class="mcnTextContent" style="padding-right: 22px; font-size: 12px;" valign="top" width="186">
<span style="color:#cccccc">Liquid Rubber MetalSafe Sealants provide corrosion protection, waterproofing and color restoration to aged rusting steel barn roofs, outlastingtypical barn roof paints for years. Our self priming coatings require only a washed surface without the removal of any rust and can be applied with a brush, roller or paint sprayer. Standard & custom color top-coats are available.</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="mcnCaptionBlock" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody class="mcnCaptionBlockOuter">
<tr>
<td class="mcnCaptionBlockInner" style="padding:9px;" valign="top">
<table class="mcnCaptionBottomContent" align="left" border="0" cellpadding="0" cellspacing="0" width="false">
<tbody>
<tr>
<td class="mcnCaptionBottomImageContent" align="left" valign="top">
<img alt="" src="https://gallery.mailchimp.com/74b6bdda18d16b31a24e81ec6/images/ec1bfef3-3b43-4356-ae66-ba8602719173.jpg" class="mcnImage" width="186">
</td>
</tr>
<tr>
<td class="mcnTextContent" style="padding:0 9px 0 9px;" valign="top" width="164">
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody>
</table></td>
</tr>
</table>
</td>
<td align="left" valign="top" class="columnsContainer" width="33%">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="templateColumn">
<tr>
<td valign="top" class="centerColumnContainer"><table class="mcnCaptionBlock" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody class="mcnCaptionBlockOuter">
<tr>
<td class="mcnCaptionBlockInner" style="padding:9px;" valign="top">
<table style="border-right:1px solid #434343;" class="mcnCaptionBottomContent" align="left" border="0" cellpadding="0" cellspacing="0" width="false">
<tbody>
<tr>
<td class="mcnTextContent" style="font-family: Arial,"Helvetica Neue",Helvetica,sans-serif; font-size: 16px;" valign="top" width="164">
<span style="color:#fff;font-size: 16px;font-family: arial;">Waterproof Planter</span>
</td>
</tr>
<tr>
<td class="mcnCaptionBottomImageContent" style="padding:10px 9px 9px 1px;" align="left" valign="top">
<img alt="" src="https://gallery.mailchimp.com/74b6bdda18d16b31a24e81ec6/images/a15958de-0729-4ccd-8228-66f5e9a80e0e.jpg" style="max-width:128px;" class="mcnImage" width="128">
</td>
</tr>
<tr>
<td class="mcnTextContent" style="padding-right: 17px; font-size: 12px;" valign="top" width="186">
<span style="color:#cccccc">Simple and easy to do. Waterproof and preserve your wood planter boxes. Untreated wood planter boxes start to decay from the harmful effects of water and ultraviolet light. Two thick coats of Liquid Rubber Waterproof Sealant will provide long lasting and full protection that will secure your planter boxes for years to come.</span>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody>
</table><table class="mcnCaptionBlock" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody class="mcnCaptionBlockOuter">
<tr>
<td class="mcnCaptionBlockInner" style="padding:9px;" valign="top">
<table class="mcnCaptionBottomContent" align="left" border="0" cellpadding="0" cellspacing="0" width="false">
<tbody><tr>
<td class="mcnCaptionBottomImageContent" align="left" valign="top" style="padding-top: 7px;">
<img alt="" src="https://gallery.mailchimp.com/74b6bdda18d16b31a24e81ec6/images/e6686072-3933-4150-b034-eef1599bc277.jpg" class="mcnImage" width="186">
</td>
</tr>
<tr>
<td class="mcnTextContent" style="padding:0 9px 0 9px;" valign="top" width="164">
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody>
</table></td>
</tr>
</table>
</td>
<td align="left" valign="top" class="columnsContainer" width="33%">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="templateColumn">
<tr>
<td valign="top" class="rightColumnContainer"><table class="mcnCaptionBlock" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody class="mcnCaptionBlockOuter">
<tr>
<td class="mcnCaptionBlockInner" style="padding:9px;" valign="top">
<table class="mcnCaptionBottomContent" align="left" border="0" cellpadding="0" cellspacing="0" width="false">
<tbody>
<tr>
<td class="mcnTextContent" style="font-family: Arial,"Helvetica Neue",Helvetica,sans-serif; font-size: 16px;" valign="top" width="164">
<span style="color:#fff;font-size: 16px;font-family: arial;">RV Roof Repair Boxes</span>
</td>
</tr>
<tr>
<td class="mcnCaptionBottomImageContent" style="padding:10px 9px 9px 1px;" align="left" valign="top">
<img alt="" src="https://gallery.mailchimp.com/74b6bdda18d16b31a24e81ec6/images/544220eb-ac2e-42df-bff5-7c23cbf5b70f.jpg" style="max-width:125px;" class="mcnImage" width="125">
</td>
</tr>
<tr>
<td class="mcnTextContent" style="font-size: 12px;" valign="top" width="186">
<span style="color:#cccccc">You may be surprised at how inexpensive and simple it can be to repair an RV, motor home or camper yourself. Using a combination of Liquid Rubber Smooth Sealant and Liquid Rubber Seam Tape, any do-it-yourself customer can seal a leaky roof, whether it's made of EPDM, TPO, fiberglass or aluminum.</span>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody>
</table><table class="mcnCaptionBlock" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody class="mcnCaptionBlockOuter">
<tr>
<td class="mcnCaptionBlockInner" style="padding:9px;" valign="top">
<table class="mcnCaptionBottomContent" align="left" border="0" cellpadding="0" cellspacing="0" width="false">
<tbody><tr>
<td class="mcnCaptionBottomImageContent" align="left" valign="top">
<img alt="" src="https://gallery.mailchimp.com/74b6bdda18d16b31a24e81ec6/images/dd773540-6d80-459a-b0ff-6e1002c906ba.jpg" class="mcnImage" width="186">
</td>
</tr>
<tr>
<td class="mcnTextContent" style="padding:0 9px 0 9px;" valign="top" width="164">
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
答案 2 :(得分：0)
为什么你使用很多表来显示简单的布局？这是您期望的表格布局。应用颜色＆amp;其他款式如你所愿。此代码将为您提供所需的确切结果。我希望它有所帮助。
<table width="100%" border="0">
<tr>
<th scope="col"> Leaky Barn Roofs </th>
<th scope="col"> Waterproof Planter </th>
<th scope="col"> RV Roof Repair Boxes </th>
</tr>
<tr>
<td><img src="https://gallery.mailchimp.com/74b6bdda18d16b31a24e81ec6/images/06c313ab-701e-4821-8e83-de852f0d901a.jpg" alt="" width="128" align="middle" /></td>
<td><img alt="" src="https://gallery.mailchimp.com/74b6bdda18d16b31a24e81ec6/images/a15958de-0729-4ccd-8228-66f5e9a80e0e.jpg" width="128" /></td>
<td><img alt="" src="https://gallery.mailchimp.com/74b6bdda18d16b31a24e81ec6/images/544220eb-ac2e-42df-bff5-7c23cbf5b70f.jpg" width="125" /></td>
</tr>
<tr>
<td>Liquid Rubber MetalSafe Sealants provide corrosion protection, waterproofing and color restoration to aged rusting steel barn roofs, outlastingtypical barn roof paints for years. Our self priming coatings require only a washed surface without the removal of any rust and can be applied with a brush, roller or paint sprayer. Standard & custom color top-coats are available.</td>
<td>Simple and easy to do. Waterproof and preserve your wood planter boxes. Untreated wood planter boxes start to decay from the harmful effects of water and ultraviolet light. Two thick coats of Liquid Rubber Waterproof Sealant will provide long lasting and full protection that will secure your planter boxes for years to come.</td>
<td>You may be surprised at how inexpensive and simple it can be to repair an RV, motor home or camper yourself. Using a combination of Liquid Rubber Smooth Sealant and Liquid Rubber Seam Tape, any do-it-yourself customer can seal a leaky roof, whether it's made of EPDM, TPO, fiberglass or aluminum.</td>
</tr>
<tr>
<td><img alt="" src="https://gallery.mailchimp.com/74b6bdda18d16b31a24e81ec6/images/ec1bfef3-3b43-4356-ae66-ba8602719173.jpg" width="164" /></td>
<td><img alt="" src="https://gallery.mailchimp.com/74b6bdda18d16b31a24e81ec6/images/e6686072-3933-4150-b034-eef1599bc277.jpg" width="164" /></td>
<td><img alt="" src="https://gallery.mailchimp.com/74b6bdda18d16b31a24e81ec6/images/dd773540-6d80-459a-b0ff-6e1002c906ba.jpg" width="164" /></td>
</tr>
</table>
答案 3 :(得分：0)
我个人不建议在构建布局时使用表格，但由于你无法改变它，我们不妨正确使用它。
所以..我注意到的第一件事就是你需要删除跨度上的填充以纠正标题的对齐方式。当我说标题我的意思是这些 - （Leaky Barn Roofs，防水播种机，RV屋顶维修箱）
table td span {
padding: 0px;
}
或者如果你想要，则向每个特定范围明确添加填充0 ..
然后将图像表对齐到一行，您需要将它们从3个主要文件中删除（确保将它们复制到单独的文本文件中，因为我们将使用它们）
这是我讨论的主要问题之一
<td align="left" valign="top" class="columnsContainer" width="33%"></td>
当我说图像表时，我指的是这些表，或者是包含图像的表
<table class="mcnCaptionBlock" border="0" cellpadding="0" cellspacing="0" width="100%"></table>
从主td中删除它们之后，在主要的tr ...之后创建另一个tr ...
主要的tr就是这张桌子后面的tr ......
<table border="0" cellpadding="0" cellspacing="0" width="600" class="templateContainer">
<tr>
<td align="left" valign="top" class="columnsContainer" width="33%">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="templateColumn">
//content here..
</table>
</td>
<td align="left" valign="top" class="columnsContainer" width="33%">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="templateColumn">
//content here..
</table>
</td>
<td align="left" valign="top" class="columnsContainer" width="33%">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="templateColumn">
//content here..
</table>
</td>
</tr>
<tr>
<td align="left" valign="top" class="columnsContainer" width="33%">
<table class="mcnCaptionBlock" border="0" cellpadding="0" cellspacing="0" width="100%">
// image here
</table>
</td>
<td align="left" valign="top" class="columnsContainer" width="33%">
<table class="mcnCaptionBlock" border="0" cellpadding="0" cellspacing="0" width="100%">
// image here
</table>
<td align="left" valign="top" class="columnsContainer" width="33%">
<td>
<table class="mcnCaptionBlock" border="0" cellpadding="0" cellspacing="0" width="100%">
// image here
</table>
</td>
</tr>
</table>