页面缩至1200px以下时左侧表单内容移位问题求助

Hey there! Let's tackle this layout alignment issue you're facing—it's super common when building responsive forms, so don't stress too much. The core problem here is that your form containers aren't staying equal in height as content wraps, which throws off the bottom alignment. Here are a few solid, modern CSS solutions to fix this:

1. Use CSS Grid for Equal-Height Columns #

Grid is perfect for this scenario because it automatically makes columns the same height, regardless of their content. Here's how to implement it:

/* Parent container holding both forms */
.form-wrapper {
  display: grid;
  /* Make columns responsive: adjust minmax value to your needs */
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem; /* Add space between forms */
}

/* Individual form card */
.form-card {
  display: flex;
  flex-direction: column;
}

/* Push the bottom section to the bottom of the card */
.form-card .bottom-content {
  margin-top: auto;
}

The grid-template-columns line ensures the forms will wrap on smaller screens, while margin-top: auto inside each form card forces the bottom content to stick to the bottom—no matter how many lines the text above wraps into.

2. Flexbox Alternative #

If you prefer Flexbox over Grid, this approach works just as well:

.form-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

.form-card {
  /* Make forms take up equal space, wrap on small screens */
  flex: 1 1 calc(50% - 1rem);
  display: flex;
  flex-direction: column;
}

.form-card .bottom-content {
  margin-top: auto;
}

The flex: 1 1 calc(50% - 1rem) rule ensures each form takes half the available space (minus half the gap to prevent overflow), and wrapping kicks in when the screen gets too small. Again, margin-top: auto handles the bottom alignment.

Quick Troubleshooting Tips #

• Double-check if any of your form elements have fixed height values—switch those to min-height instead so containers can grow with content.
• If the text wrapping is causing unexpected height jumps, you can add a media query to tweak font size/line-height on screens under 1200px:

  @media (max-width: 1200px) {
    .form-card .text-content {
      font-size: 0.9rem;
      line-height: 1.4;
    }
  }
  

This is optional, but it can reduce unnecessary line breaks if you prefer.

Give these methods a shot—either Grid or Flexbox should get your bottom content aligned perfectly across screen sizes. Let me know if you run into any issues with the code!

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