如何在Repeater中用Div实现YouTube链接的水平排列显示

Looks like your main issue stems from invalid HTML nesting and relying on table layout for a wrapping, responsive design. Let's break down the problems and fix this step by step:

Why Your Original Code Isn't Working #

• You’re nesting a <div> directly inside a <table>—this is invalid HTML, as tables can only have <tr> as direct children. This breaks the layout and prevents your float styles from behaving as expected.
• Your <tr>/<td> structure is broken (unclosed <iframe> tag, a <td> outside of a <tr>), which further messes up rendering.

Let’s rewrite the template with valid, modern layouts that support automatic wrapping, plus add the horizontal dividers you wanted.

Option 1: Flexbox Layout (Recommended) #

Flexbox is the simplest way to create a clean, wrapping responsive layout. Here’s the updated ItemTemplate:

<ItemTemplate>
    <asp:Panel ID="Panel3" runat="server" Style="margin-left:10px; margin-bottom:15px; width:800px; font-size:small">
        <!-- Flex container that automatically wraps items -->
        <div runat="server" style="display: flex; flex-wrap: wrap; gap: 15px; width: 100%;">
            <!-- Each video card takes ~50% width (minus half the gap to avoid overflow) -->
            <div style="flex: 0 0 calc(50% - 7.5px);">
                <iframe width="100%" height="210" src='<%# Eval("VideoLink") %>' 
                        frameborder="0" allowfullscreen></iframe>
                <p style="margin-top: 8px;"><%# Eval("VideoDesc") %></p>
            </div>
        </div>
        <!-- Add horizontal line between items (skip the last item) -->
        <% if (Container.ItemIndex != Repeater1.Items.Count - 1) { %>
            <hr style="margin: 20px 0; border: none; border-top: 1px solid #cccccc;" />
        <% } %>
    </asp:Panel>
</ItemTemplate>

Key Improvements: #

• Replaced the invalid table layout with a flex container. flex-wrap: wrap ensures items automatically wrap when they hit the 800px panel width.
• gap:15px adds clean, consistent spacing between video cards without messy margin hacks.
• Each video card uses flex: 0 0 calc(50% - 7.5px) to fit exactly two per row (subtracting half the gap to prevent overflow).
• The iframe uses width:100% to adapt to its container, making it responsive within the panel.
• Conditional horizontal lines only appear between items (not after the last one) for a polished look.

Option 2: Float Layout (For Older Browser Compatibility) #

If you need to support older browsers that don’t handle flexbox well, use float with clearfix:

<ItemTemplate>
    <asp:Panel ID="Panel3" runat="server" Style="margin-left:10px; margin-bottom:15px; width:800px; font-size:small; overflow:hidden;">
        <div runat="server" style="width: 100%;">
            <div style="float: left; width: calc(50% - 10px); margin-right:10px; margin-bottom:15px;">
                <iframe width="100%" height="210" src='<%# Eval("VideoLink") %>' 
                        frameborder="0" allowfullscreen></iframe>
                <p style="margin-top:8px;"><%# Eval("VideoDesc") %></p>
            </div>
            <!-- Clear float after every 2 items to prevent layout breakage -->
            <% if ((Container.ItemIndex + 1) % 2 == 0) { %>
                <div style="clear: both;"></div>
            <% } %>
        </div>
        <!-- Horizontal divider (skip last item) -->
        <% if (Container.ItemIndex != Repeater1.Items.Count - 1) { %>
            <hr style="margin:20px 0; border:none; border-top:1px solid #cccccc; clear:both;" />
        <% } %>
    </asp:Panel>
</ItemTemplate>

Key Improvements: #

• Uses float:left to align items side-by-side, with width calculated to fit two per row.
• overflow:hidden on the Panel acts as a clearfix to contain floated elements and prevent layout overflow.
• A conditional clear div resets the float after every second item to ensure proper wrapping.
• The horizontal line includes clear:both to avoid being overlapped by floated elements.

Either approach will fix your wrapping issue and clean up the invalid HTML structure from your original code.

内容的提问来源于stack exchange，提问作者Johnny Bones