将 2 个具有特定宽度大小的不同 iFrame 对齐答案

【问题标题】：Aligning 2 different iFrames with specific width sizes将 2 个具有特定宽度大小的不同 iFrame 对齐
【发布时间】：2014-02-04 11:26:41
【问题描述】：

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

这是我的表格代码 sn-p：

<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 页面的一部分，我确信除了这段代码 sn-p 之外没有什么会导致 iFrame 的对齐问题。我尝试了不同的方法，但没有帮助。任何帮助将不胜感激。

【问题讨论】：

标签： html asp.net iframe

【解决方案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>

【讨论】：