表单编辑器中带子列Div的父Div设置边框时，子列间垂直边框实现方案咨询

Great question! Let's tackle this step by step—you need vertical dividers between child columns that match the parent's border style, keep columns equal height regardless of dynamic content, and work with 1-6 columns. Here's a solid solution that fixes the issues you ran into with your previous attempts:

Step 1: Switch to Flexbox for Automatic Equal Height #

First, let's ditch the float layout and use Flexbox—it natively handles equal-height columns without extra hacks, which solves your dynamic content height problem. Update your CSS like this:

.main {
  padding-top: 10px;
  padding-bottom: 10px;
  margin: 0;
  width: 100%;
  border: 1px solid black; /* User-defined border will go here */
  box-sizing: border-box;
}

.content {
  margin-left: -15px;
  margin-right: -15px;
  display: flex; /* Enable Flexbox for auto-equal heights */
}

.column {
  padding-right: 15px;
  padding-left: 15px;
  flex: 1; /* Equal width for all columns, works for 1-6 columns */
  box-sizing: border-box;
  background-color: red;
  background-clip: content-box;
  /* Removed float and fixed width—flex handles layout automatically */
}

.inner {
  min-height: 50px;
}

Step 2: Sync Column Dividers with Parent Border #

Since you need vertical dividers that match the parent's border (including dotted/dashed styles), we'll use jQuery to dynamically copy the parent's border properties to child columns (skipping the first column to avoid a redundant left divider).

Add this jQuery function:

function syncColumnDividers() {
  const $parent = $('.main');
  const $columns = $parent.find('.column');
  
  // Grab the parent's border properties to match exactly
  const borderWidth = $parent.css('border-left-width');
  const borderStyle = $parent.css('border-left-style');
  const borderColor = $parent.css('border-left-color');
  
  // Only apply dividers if the parent has a visible border
  if (borderWidth !== '0px' && borderStyle !== 'none') {
    $columns.each(function(index) {
      // Skip the first column to avoid an unnecessary left divider
      if (index !== 0) {
        $(this).css({
          'border-left': `${borderWidth} ${borderStyle} ${borderColor}`
        });
      } else {
        $(this).css('border-left', 'none');
      }
    });
  } else {
    // Remove all dividers if the parent has no border
    $columns.css('border-left', 'none');
  }
}

// Run on page load to initialize
syncColumnDividers();

// Call this function whenever the user updates the parent's border (e.g., after saving settings)
// Example: If your border settings are in a form, trigger it on input change
// $('#border-settings-form').on('change', syncColumnDividers);

Why This Works #

• Equal Height Guarantee: Flexbox ensures all .column elements stretch to match the tallest one, no matter how much dynamic content is in .inner.
• Perfect Border Matching: By copying the parent's exact border width, style, and color, vertical dividers will work with any border type the user selects (solid, dotted, dashed—no more box-shadow limitations).
• No Overflow Issues: Unlike outline, using border-left with box-sizing: border-box keeps dividers within the parent's bounds.
• Single Column Fix: When only one column exists, we skip adding a divider, so you won't get that weird double-border look you mentioned earlier.

Testing Edge Cases #

• 1 Column: No vertical divider, just the parent's border (correct, clean behavior).
• 6 Columns: Equal-width columns with matching dividers between each, all aligned perfectly with the parent's border.
• Dynamic Content: Taller content in one column automatically stretches all others to match.
• Dashed/Dotted Borders: Dividers will use the same style as the parent—no more workarounds.

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