向右添加图像会将下表向右推

时间:2014-03-05 14:19:34

标签: html css image alignment

我有一些HTML代码。我添加了两张图片:一张是左边的,另一张是右边的。然后它有两个标题和一个HTML表格。

问题是我使用以下代码将图像添加到文档中。

<img src="http://Path_To_Foler/Logo1.jpg" align="left" />       
<img src="http://Path_To_Foler/Logo2.jpg" align="right" />  

<p class="h1"><b>Private and Confidential</b> </p>
<p class="h1"><b>REPORT FOR Mr Person A BLA BLA</b> </p>

<table class="table" >
    <tr>
        <td class="CellHeader">Date </td>
        <td class="CellHeader">Time</td>
    </tr>
    <tr>
        <td class="cell"><AssessmentDateFrmMSPAPARR /></td>
        <td class="cell"><CurrentRcFrmMSPAPARR /></td>
    </tr>
</table>

CSS

  <style>
    .CellHeader{
        width:50%;
        text-align:left;
        font-family: 'calibri';
        font-size: 11pt;
        color:#FFFFFF;
        background-color:#151515;
        border:1px solid black;
        border-collapse:collapse;
    }
    .cell{
        width:50%;
        text-align:left;
        font-family: 'calibri';
        font-size: 11pt;
        border:1px solid black;
        border-collapse:collapse;
    }

    .table{
        width:100%;
        border:1px solid black;
        border-collapse:collapse;
    }
    .h1{
        page-break-before: always;
        text-align: center;
        font-family: 'calibri';
        font-size: 12pt;
    }
 <style>

问题

一切都按预期工作正常。当我添加第二张图片时,问题就出现了。添加第二个图像会使表格也正确对齐。

Wrong Output

当我从图像元素中取出align:"right"属性时,表格应该是它应该的位置,但是第二个图像被推向右边,这是可以理解的。

enter image description here

我该如何解决这个问题?

1 个答案:

答案 0 :(得分:4)

尝试将align="left"替换为style="float:left",将align="right"替换为style="float:right"

然后,在您的CSS中的clear: both中添加.table{}