将图像添加到右侧将下方的表格向右推

我有一些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

我该如何解决这个问题？

来源

2014-03-05 M.Ali

你能为此做一个小提琴吗？ – Bobby5193

我刚刚做了，它工作得很好。 http://jsfiddle.net/KBCgY/ –

尝试通过style="float:right"

通过style="float:left"和align="right"更换align="left"然后，在你的CSS在.table{}添加clear: both。

来源

2014-03-05 14:25:46 piernov

似乎也适用。 http://jsfiddle.net/KBCgY/1/ –

非常感谢您的快速回复，并感谢所有尝试为我的问题找到解决方案的人。这个解决方案像一个魅力:)。 –

将图像添加到右侧将下方的表格向右推

回答

相关问题