我有一些 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>
问题
一切都如预期的那样运行良好。当我添加第二张图片时,问题就开始了。添加第二张图片也会使表格右对齐。
当我从图像元素中取出 align:"right"
属性时,表格就在它应该在的位置,但是第二个图像被推到右边,这是可以理解的.
我该如何解决这个问题?
最佳答案
尝试将 align="left"
替换为 style="float:left"
并将 align="right"
替换为 style =" float :右"
然后,在您的 CSS 中的 .table{}
中添加 clear: both
。
关于html - 向右添加图像会将下表向右推,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22200365/