Question

我正在设计一个简报模板，我遇到的问题是包含同一行中图形和文本的表格。出于某种原因，图形将文本一直推到右侧。我希望文本与图标“连接”/左对齐，因为模板最多使用3个图标集（图标+文本）。

现在代码看起来并不是很好，因为我一直在尝试一切只是为了让它工作。有人能帮帮我吗？

<table border="0" cellpadding="0" cellspacing="0" class="salesListText">        
    <tr>
        <td align="left" valign="middle" class="saleslistIcon"> 
            <img src="http://dyreparken-nyhetsbrev.s3.amazonaws.com/ikon/billetterL.png" alt="" height="28" width="28" />
        </td>           
        <td align="left" valign="middle" class="saleslistIconText"> 
            Billetter       
        </td>               
    </tr>                   
    <tr>            
        <td valign="baseline" colspan="3">  
            <h2>Kaptein Sabeltann - Kun forestillingen</h2>             
            (Kan kombineres med parkbilletter og/eller overnatting)     
        </td>
    </tr>
    <tr>
        <td valign="baseline">  
            <table border="0" cellpadding="0" cellspacing="0" width="100%" class="salesListSpec">
                <tr>
                    <td valign="baseline" colspan="3">
                        <h4>Pakken inneholder:</h4>
                        - Billetter til forestillingen
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td align="left" valign="top" class="saleslistPrice" colspan="3">
            <h2 style="color:#E3178A;"><span>Pris fra&nbsp;</span>240,-</h2>
        </td>
    </tr>
</table>

.saleslistIcon{padding-right:10px;}
.saleslistIconText{color:#B4B4B4; font-size:12px; padding-right:8px;}
.salesListText{width:100%;}
.salesListSpec{padding-top:10px; line-height:170%; display:block;}
h2 span{font-size:16px; font-weight:normal; color:#444444;}

Answer 1

从小提琴的外观来看，这是可以预料的。您正在使用表格布局，这意味着同一列中的所有单元格将具有相同的宽度，并且同一行中的所有单元格将具有相同的高度。我的建议是放弃表格布局并使用semantic elements。

如果您对使用表格布局感到满意，则需要了解单元格中的colspan and rowspan属性以及它们对布局的影响。

Answer 2

你有一张有三列的桌子;但是你在相同的列（0）中干扰图像（小）和正文（大）。这将推动第2列和第3列向右移动。

尝试将border="1"放到table定义上，看看我的意思。

我建议您使用外部表来创建行，并且只有一个TD。在每个TD内部然后嵌入辅助表格以进行复杂的布局。我假设发送了一封电子邮件简报，因此请将CSS保持在最低限度或将其设为内联而不是单独的样式部分。很多电子邮件提供商都不能很好地使用CSS。

希望有所帮助。

Answer 3

将display:inline放在<tr>里面，你有图标+文字。

http://jsfiddle.net/zg0zrx3v/

表格单元格需要使用更多宽度

3 个答案: