Question

我需要制作一个宽度不均匀的桌子。

目前我有这样的事情：

Current Output

我需要这样的事情：

Output Needed

以下是一些现有代码：

<table>
    <tr>
        <td valign="top">
            <img src="person1" class="cycle" style="height:4.5rem; width:4.5rem; position:relative; top:-4px; float:left">
            <!--SMALL IMAGE-->
        </td>
        <td style="padding-left: 20px;">
            <div class="balloon right" style="float:right;width: 855px;">
                <!--LARGE DIV-->
            </div>
        </td>
    </tr>
    <tr>
        <td style="padding-right: 20px;">
            <div class="balloon left" style="float:left;width: 855px;">
                <!--LARGE DIV2 -->
            </div>
        </td>
        <td valign="top">
            <img src="person2" style="height:4.5rem; width:4.5rem; position:relative; top:-4px; float:left" class="cycle">
            <!--SMALL IMAGE2 -->
        </td>

    </tr>
</table>

Answer 1

使您的主（外部表）使用单个单元格呈现一行，将当前表格放在此主单元格中的一个人的注释中：

<table>
  <tr>
     <td>
       <table>
          <tr>
           <td valign="top">
             <img src="person1" class="cycle" style="height:4.5rem; width:4.5rem; position:relative; top:-4px; float:left">
           </td>
           <td style="padding-left: 20px;">
            <div class="balloon right" style="float:right;width: 855px;">
              <!--LARGE DIV-->
            </div>
          </td>
         </tr>
       </table>
     </td>
 </tr>
 <tr>
    <td>
       <table>
          <tr>
           <td style="padding-right: 20px;">
             <div class="balloon left" style="float:left;width: 855px;">
              <!--LARGE DIV2 -->
             </div>
           </td>
          <td valign="top">
            <img src="person2" style="height:4.5rem; width:4.5rem; position:relative; top:-4px; float:left" class="cycle">
        <!--SMALL IMAGE2 -->
          </td>
         </tr>
       </table>
     </td>
 </tr>
</table>

这样你的主表有1行1 td，其中td是一个包含所有内容的新表。您必须跟踪并切换每行图像的左/右。

Answer 2

如果您坚持使用表格来实现此功能，建议您查看rowspan和colspan元素的tr和td属性。

就个人而言，我建议查看像Bootstrap这样的框架，它允许使用网格系统动态地在屏幕上放置内容，同时还支持响应式设计和解决其他问题。

Answer 3

我有一个解决方案，你尝试这个，让我知道它是如何工作的

添加

<div style="clear:both;"></div>

像这样

<table>
    <tr>
        <td valign="top">
            <img src="person1" class="cycle" style="height:4.5rem; width:4.5rem; position:relative; top:-4px; float:left">
            <!--SMALL IMAGE-->
        </td>
        <td style="padding-left: 20px;">
            <div class="balloon right" style="float:right;width: 855px;">
                <!--LARGE DIV-->
            </div>
 <div style="clear:both;"></div>
        </td>
    </tr>
    <tr>
        <td style="padding-right: 20px;">
            <div class="balloon left" style="float:left;width: 855px;">
                <!--LARGE DIV2 -->
            </div>
 <div style="clear:both;"></div>
        </td>
        <td valign="top">
            <img src="person2" style="height:4.5rem; width:4.5rem; position:relative; top:-4px; float:left" class="cycle">
            <!--SMALL IMAGE2 -->
        </td>

    </tr>
</table>

HTML中的非统一表

3 个答案: