Question

我正在尝试在页面上显示Youtube链接以及简短描述，而我正在使用转发器来执行此操作。我的项目模板有：

<Item Template>
  <asp:Panel ID="Panel3" runat="server" Style="margin-left:10px; margin-bottom:0px" width="800px" Font-Size="small">
    <table style="width:790px">
      <div runat="server" style="float:left; overflow:hidden; display:block">
        <tr>
          <td>
            <iframe width="370" height="210" src="<%#Eval("VideoLink") %>
          </td>
        </tr>
          <td><%#Eval("VideoDesc") %></td>
        </tr>
      </div>
    </table>
  </asp:Panel>
</ItemTemplate>

显示正常，但会垂直显示。我希望它水平显示，直到它填满表格的宽度，然后从下一行开始。我认为div标签会这样做，但事实并非如此。

另外，理想情况下我喜欢视频行之间的水平线，但如果太过涉及我可以跳过它。

Answer 1

如果我的理解是正确的，那么最好使用section元素代替table来满足您的要求，并将div作为inline-block元素，以便它'将正确对齐。

<Item Template>
  <asp:Panel ID="Panel3" runat="server" Style="margin-left:10px; margin-bottom:0px" width="800px" Font-Size="small">
    <section style="width:790px">
      <div runat="server" style="display:inline-block">
        
            <iframe width="370" height="210" src=""></iframe>
         
      </div>
      <div runat="server" style="display:inline-block">
       
            <iframe width="370" height="210" src=""></iframe>
         
      </div>
      <div runat="server" style="display:inline-block">
       
            <iframe width="370" height="210" src=""></iframe>
         
      </div>
    </section>
  </asp:Panel>
</ItemTemplate>

Answer 2

所以不要用桌子做，因为它没有任何意义，也不要把div放在桌子里。它根本不推荐。

使用div这样做：

<div runat="server" style="float:left; overflow:hidden; display:block">

    <div class="item">
        <iframe width="370" height="210" src="<%#Eval("VideoLink") %>">       
        <span class="description"><%#Eval("VideoDesc") %></span>
    </div>

</div>

和css样式表

.server {
    display: flex;
    flex-flow: row-wrap;
}

.server .item {
    border-bottom: 1px solid black;
}

.server .item .description {
    display: block;
}

它应该完成这项工作

在转发器中使用div标签以水平显示

2 个答案: