Question

我一直试图在页面上对齐2个不同的iFrame，一个在右边，另一个在左边。左边的iFrame需要宽度为25％，高度需要100％，而右边的iFrame需要宽度为75％，高度为100％。它们被放置在高度和宽度为100％的桌子内。我尝试在JSFiddle.net上运行我的代码，它或多或少看起来像我期望的那样，但是，它在我的应用程序中看起来并不相同（它肯定没有对齐25％-75％）。这是一个screenshot。

这是我的表格的代码片段：

<table height="100%" width="100%">
   <tr style="height:100%">

       <td style="width:25%">
           <iframe name="ifrTemplateLeftPreview" id="ifrTemplateLeftPreview" width="100%" height="100%"></iframe>
       </td>

       <td style="width:75%">
             <iframe name="ifrTemplateRightPreview" id="ifrTemplateRightPreview" width="100%" height="100%"></iframe>    
       </td>

   </tr>
</table>

我尝试用像素（px）替换'％'来设置两个标签的宽度，但是，它似乎弄乱了一些页面并且似乎没有解决问题。

上面的代码只是整个ASPX页面的一部分，我确信除了这段代码片段之外没有任何问题导致iFrames的对齐问题。我尝试了不同的方法，但没有帮助。任何帮助将受到高度赞赏。

Answer 1

好吧，我自己整理了这个问题。基本上我将<td>更改为<div>，并为两个iFrame添加了float:left属性，这似乎已对问题进行了排序：

<table height="100%" width="100%">
  <tr>
    <td>
      <div style="width:100%">

        <div style="width:25%; float:left">
         <iframe name="ifrTemplateLeftPreview" id="ifrTemplateLeftPreview" width="100%" height="100%"></iframe>
        </div>

        <div style="width:75%; float:left">
         <iframe name="ifrTemplateRightPreview" id="ifrTemplateRightPreview" width="100%" height="100%"></iframe>    
        </div>

       </div>
    </td>
  </tr>
</table>

对齐具有特定宽度尺寸的2个不同iFrame

1 个答案: