Question

我正在制作一个小的html页面，以包含在我姐姐的“演示文稿”（学校）中。我创建了一个包含多行的表格，第一列的链接为target="ifr"，即iframe。这些链接包括元素的解释。

我想在右侧包含iframe以使页面更加精美，但我遇到了麻烦，试图使iframe正常向上和向上浮动。

iframe代码：

    <iframe style="float:right;" width="575px" height="800px" id="ifr" name="ifr" src="no-src.html"></iframe>

表：

<table border=1 bordercolor="#000000" cellpadding=15 cellspacing=0>

<tr valign=top> <!-- category-->
    <td align="center">
        <FONT COLOR="#800000" FACE="TimesNewRomanPSMT, sans-serif" SIZE=3><B>Denominazione</B></FONT>
    </td>
    <td align="center">
        <FONT COLOR="#800000" FACE="TimesNewRomanPSMT, sans-serif" SIZE=3><B>Gene</B></FONT>
    </td>
    <td align="center">
        <FONT COLOR="#800000" FACE="TimesNewRomanPSMT, sans-serif" SIZE=3><B>Origine</B></FONT>
    </td>
</tr>
<tr valign=top> <!-- first row, there are 12 of these-->
    <td><a href="pc.html" target="ifr">Paramiotonia congenita (PC)</a></td>
    <td align="center">17q23</td>
    <td>Ereditarietà autosomica dominante</td>
</tr>

这是我得到的： what i get

这就是我想要的： what i want

我想让它们成为<ul>的一部分并使用display:inline，但我只有一些html / css的基础。提前致谢

Answer 1

Demo ，也是全屏结果Demo

更新：已移除非html5 valign

我建议不要使用<font>这个相当古老的方式，而不是使用css。

HTML

<table border=1 bordercolor="#000000" cellpadding=15 cellspacing=0>
    <tr>
        <!-- category-->
        <td align="center">Denominazione</td>
        <td align="center">Gene</td>
        <td align="center">Origine</td>
    </tr>
    <tr>
        <!-- first row, there are 12 of these-->
        <td><a href="pc.html" target="ifr">Paramiotonia congenita (PC)</a>
        </td>
        <td align="center">17q23</td>
        <td>Ereditarietà autosomica dominante</td>
    </tr>
    <tr>
        <!-- first row, there are 12 of these-->
        <td><a href="pc.html" target="ifr">Paramiotonia congenita (PC)</a>
        </td>
        <td align="center">17q23</td>
        <td>Ereditarietà autosomica dominante</td>
    </tr>
    <tr>
        <!-- first row, there are 12 of these-->
        <td><a href="pc.html" target="ifr">Paramiotonia congenita (PC)</a>
        </td>
        <td align="center">17q23</td>
        <td>Ereditarietà autosomica dominante</td>
    </tr>
    <tr>
        <!-- first row, there are 12 of these-->
        <td><a href="pc.html" target="ifr">Paramiotonia congenita (PC)</a>
        </td>
        <td align="center">17q23</td>
        <td>Ereditarietà autosomica dominante</td>
    </tr>
    <tr>
        <!-- first row, there are 12 of these-->
        <td><a href="pc.html" target="ifr">Paramiotonia congenita (PC)</a>
        </td>
        <td align="center">17q23</td>
        <td>Ereditarietà autosomica dominante</td>
    </tr>
    <tr>
        <!-- first row, there are 12 of these-->
        <td><a href="pc.html" target="ifr">Paramiotonia congenita (PC)</a>
        </td>
        <td align="center">17q23</td>
        <td>Ereditarietà autosomica dominante</td>
    </tr>
    <tr>
        <!-- first row, there are 12 of these-->
        <td><a href="pc.html" target="ifr">Paramiotonia congenita (PC)</a>
        </td>
        <td align="center">17q23</td>
        <td>Ereditarietà autosomica dominante</td>
    </tr>
    <tr>
        <!-- first row, there are 12 of these-->
        <td><a href="pc.html" target="ifr">Paramiotonia congenita (PC)</a>
        </td>
        <td align="center">17q23</td>
        <td>Ereditarietà autosomica dominante</td>
    </tr>
</table>
<iframe style="float:right;" width="575px" height="800px" id="ifr" name="ifr" src="no-src.html"></iframe>

CSS

td {
    color:#800000;
    font-family:"TimesNewRomanPSMT, sans-serif";
    font-size: 14px;
}
tr {
    vertical-align: top; /* valign=top is not used now */
}
table {
    width: calc(100% - 580px); /* negate the width of iframe also borders */
    float: left;
}

iframe浮动顶部和右侧

1 个答案: