HTML多个空格对齐

时间:2014-05-04 07:40:38

标签: python html css flask

我希望col对齐行,我写代码:

result.seq_content = 'GCAUCCGGGUUGAGGUAGUAG'
result.vel_bar =     '|| ||||||  ||| ||| ||'
result.seq_match =   'CG.AGGUUC..UUC.AUC.UC'
<table style="font-family:Courier, monospace;">
<td>
    {{ result.seq_content}}
    <br>
    {{ result.vel_bar}}
    <br>
    {{ result.seq_match}}
    </td>
</tr>
</table>

但结果是 enter image description here

多个空格成为空间。

我使用了tag pre,但是A,C,G,U的大小不等于|的大小或空间,所以它失败了。

我更改了代码:

result.seq_content = 'GCAUCCGGGUUGAGGUAGUAG'
result.vel_bar =     '|| ||||||  ||| ||| ||'
result.seq_match =   'CG.AGGUUC..UUC.AUC.UC'
<table style="font-family:Courier, monospace;">
<tr>
    <td>
    {{ result.seq_content}}
    <br>
    {% for e in result.vel_bar %}
        {% if e == ' '%}
            &nbsp
        {% else%}
            {{ e}}
        {% endif%}
    {% endfor%}
    <br>
    {{ result.seq_match}}
    </td>
</tr>
</table>

但{{e}}的大小大于A,C,G,U。

那么如何对齐多个空格,如下所示:

GCAUCCGGGUUGAGGUAGUAG
|| ||||||  ||| ||| ||
CG.AGGUUC..UUC.AUC.UC

谢谢! :d

问题已经解决。

我替换了所有&#39; &#39;与nbsp;,并取消自动转义,这是我的代码:

result.vel_bar = result.vel_bal.repalce(' ', '&nbsp;')

<td align="left">
{{ result.seq_content }}
{% autoescape false%}
{{ result.vel_bar}}
{% endautoescape %}
{{ result.seq_match }}
</td>

谢谢你的帮助。 :d

3 个答案:

答案 0 :(得分:0)

你可以使用一些php / js / python数组来破坏这些序列元素,然后使用php / js / python使用实现它的css类来构建它: http://jsfiddle.net/ewR54/5/

所以基本上你解析你的数据:

GACU
||||
CUGA ..

^--Parser -->

并为每个序列取出3个元素(例如:G,|,C)并使用php,js或python使用我发布的那个小提琴中的div构造来构建它。

玩得开心。

答案 1 :(得分:0)

尝试在<pre>

中使用<td>标记
    <pre>
    'GCAUCCGGGUUGAGGUAGUAG'
    '|| ||||||  ||| ||| ||'
    'CG.AGGUUC..UUC.AUC.UC'    
    </pre>

Demo

答案 2 :(得分:0)

首先,使用等宽字体是件好事。 HTML将多个空格替换为单个空格:但您可以使用&nbsp;替换每个空格 result.vel_bar.replaceAll(/\s/, '&nbsp;') 这样你的对齐应该是完美的。